Unable to use in nuxt 3

[odetolakehinde]

Error:

package.json

"dependencies": {
    "fabric": "^6.4.3",
    "konva": "^9.3.15",
    "nuxt": "^3.13.0",
    "vue": "latest",
    "vue-konva": "^3.1.2",
    "vue-router": "latest"
  }

plugins/konva.ts

import VueKonva from 'vue-konva';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueKonva)
})

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  plugins: [{src: '~/plugins/konva.js', mode: 'client'}],
  build: {transpile: ['konva']},
})

[lavrton]

Please make a small repository to reproduce.

The quick solution can be just installing canvas library: npm install canvas@next.

[odetolakehinde]

here's a repo - https://github.com/odetolakehinde/nuxt-konva

this does not seem to work:

yarn add canvas@next

[odetolakehinde]

cc @lavrton

[xzfxzrs]

if you just want to solve the problem quickly, you can try to turn off ssr with "ssr: false"

[Numil]

You need to change the name of your plugin from konva.ts to konva.client.ts, since konva and canvases cannot be SSR (i'm a bit late to the party)

Every components using konva components need to be Component.client.vue too

[rsaleri]

@odetolakehinde, to fix the issue you reported on #244 (this one specifically) about does not provide an export named 'default' (at vue-konva.js, you need to change the plugin like this:

import VueKonva from 'vue-konva'
import Konva from 'konva'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueKonva, { Konva })
})

I provided enough bestemmie a tutti i santi for everyone so no one else need to ;)