[Vuejs]-Using the vue-konva with nuxtjs fails with various error

by

3👍

✅

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.

👤hamid-davodi

0👍

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 ) })
👤Alan vasquez

Leave a comment