Using the vue-konva with nuxtjs fails with various error

Question

I followed the documentation and Github I did the following steps:

1. install vue-konva and konva and canvas using npm install vue-konva konva --save and npm install canvas --save.

2. Created vuekonva.js under plugins folder with below content:

import Vue from 'vue'
import VueKonva from 'vue-konva'
Vue.use(VueKonva)

3. Added plugins: [ "~/plugins/vuekonva"], under nuxt.config.js

4. I tried adding under nuxt-config.js but still no luck:

build: {
    standalone: true
  },

5. Created a page under pages folder and added code from documenation:

<template>
  <div>
    <v-stage ref="stage" :config="stageSize">
      <v-layer>
        <v-text :config="{ text: 'Some text on canvas', fontSize: 15 }" />
        <v-rect
          :config="{
            x: 20,
            y: 50,
            width: 100,
            height: 100,
            fill: 'red',
            shadowBlur: 10,
          }"
        />
        <v-circle
          :config="{
            x: 200,
            y: 100,
            radius: 50,
            fill: 'green',
          }"
        />
        <v-line
          :config="{
            x: 20,
            y: 200,
            points: [0, 0, 100, 0, 100, 100],
            tension: 0.5,
            closed: true,
            stroke: 'black',
            fillLinearGradientStartPoint: { x: -50, y: -50 },
            fillLinearGradientEndPoint: { x: 50, y: 50 },
            fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
          }"
        />
      </v-layer>
      <v-layer ref="dragLayer" />
    </v-stage>
  </div>
</template>

<script>
export default {
  data () {
    return {
      stageSize: {
        width,
        height
      }
    }
  },
  mounted () {
    if (process.browser) {
      this.stageSize.width = window.innerWidth
      this.stageSize.height = window.innerHeight
    }
  }
}
</script>

I get the error: Must use import to load ES Module:

I tried without plugins and it is throwing the error:

vue.runtime.esm.js:620 [Vue warn]: Unknown custom element: <v-stage> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

Not understanding whats the issue please help.

Answer 1

According to Nuxt documentation some plugins export an ES6 module. I think this is the case for konva node module. I followed the steps you mentioned above. But in the nuxt.config.js file I configured the plugin as follow:

plugins: [    
    { src: "~/plugins/vuekonva", mode: 'client' }
],

build: {
    transpile: ['konva']
},

After that I replaced the code of your page with the code of konvajs as follows:

<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  data() {
    return {
      configKonva: {
        width: 200,
        height: 200
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
      }
    };
  }
};

</script>

That is working for me when I link to the page with nuxt-link. but if I refresh the page I get some errors that is maybe for SSR. I am not sure but if you read this documentation you maybe could solve the problem for SSR.

Answer 2

based in the nuxt documentacion
only create /plugings/konva-vue.client.js and add this code https://nuxt.com/docs/guide/directory-structure/plugins

import { defineNuxtPlugin } from '#app'
import  VueKonva from 'vue-konva'

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