[Vue warn]: Error in mounted hook: "Error: Konva error: You may only add layers to the stage."

[rdgbrezolin]

I'm applying the same example from the documentation (link) and it doesn't work.

Example: https://konvajs.org/docs/vue/Shapes.html

Error: [Vue warn]: Error in mounted hook: "Error: Konva error: You may only add layers to the stage."

It seems to me some error with version/installation. I can't run anything related to konva.

"konva": "^8.3.14",
"vue-konva": "^2.1.7",
"vue": "^2.5.22"

[lavrton]

Can you make a demo? Like a codesandbox?

[rdgbrezolin]

Yes.

WizardPupilometro.vue:

<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-layer>
    </v-stage>
  </div>
</template>

<script>
const width = window.innerWidth;
const height = window.innerHeight;
let vm = {};
export default {
  data() {
    return {
      stageSize: {
        width: width,
        height: height
      }
    };
  }
};
</script>

Index.js:

import Vue from 'vue';
import App from './App';
import router from './router';

new Vue({
    router,
    el: "#wizardPupilometroRootElement",
    components: { App }
});

Router.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
import WizardPupilometro from './components/WizardPupilometro.vue';
import VueKonva from 'vue-konva';

Vue.use(VueRouter);
Vue.use(VueKonva);

let router = new VueRouter({
    routes: [
        {
            path: '/',
            name: 'WizardPupilometro',
            component: WizardPupilometro,
            props: true,
        },
    ]
});

export default router;

[rdgbrezolin]

[rdgbrezolin]

@lavrton Can you help me? I can't run any examples from konva.

[lavrton]

I need a small demo.