[Vuejs]-Unknown VueKonva Type w/ TypeScript

by

1👍

✅

The error message points correctly at your problem.

  >  8 |   VueKonva,
       |   ^^^^^^^^

Check the project documentation on how to use VueKonva.

import { createApp } from 'vue';
import App from './App.vue';
import VueKonva from 'vue-konva';

const app = createApp(App);
app.use(VueKonva);
app.mount('#app');

Here is the working example for Vue v3

const { createApp } = Vue 

const app = createApp({
data() {
  return {
    configKonva: {
      width: 200,
      height: 200,
    },
    configCircle: {
      x: 100,
      y: 100,
      radius: 70,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 4,
    }
  }
}});
app.use(VueKonva);
app.mount('#app');
<div id="app">
  <v-stage ref="stage" :config="configKonva">
    <v-layer ref="layer">
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</div>
<!--1. Link Vue Javascript & Konva-->
<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/konva@8.4.3/konva.min.js"></script>
<!--2. Link VueKonva Javascript -->
<script src="https://unpkg.com/vue-konva@3.0.2/umd/vue-konva.js"></script>

UPDATE

  1. Vue v2 has no $mount method.
  2. Do not put the plugin inside the App definition

Your code

new Vue({
  // this is not necessary -> VueKonva,
  render: h => h(App)
}) // this is not necessary -> .$mount("#app");

Here is the working example for Vue v2

Vue.use(VueKonva)

new Vue({
  el: '#app',
  data() {
    return {
      configKonva: {
        width: 200,
        height: 200,
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
      }
    }
  }
})
<div id="app">
  <v-stage ref="stage" :config="configKonva">
    <v-layer ref="layer">
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</div>
<!--1. Link Vue Javascript & Konva-->
<script src="https://unpkg.com/konva@8.4.3/konva.min.js"></script>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
<!--2. Link VueKonva Javascript -->
<script src="https://unpkg.com/vue-konva@2.1.7/umd/vue-konva.js"></script>
👤Tolbxela

Leave a comment