vue-konva

By default, vue-konva operates in non-strict mode. In this mode, vue-konva only updates properties that have changed in the config prop. This allows manual changes (like drag-and-drop) to persist without being immediately overwritten by the prop value.

In strict mode, vue-konva forces all node properties to match the values provided in the config prop, regardless of whether they changed.

To enable strict mode for a specific component, add the __useStrictMode attribute:

<v-rect :config="{}" __useStrictMode></v-rect>

Register the VueKonva plugin in your application entry point.

For Vue 3:

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

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

For Vue 2:

import Vue from 'vue';
import VueKonva from 'vue-konva';

Vue.use(VueKonva);

By default, vue-konva imports the full konva package. To reduce bundle size, import from vue-konva/core and explicitly import only the Konva shapes you need.

Note: Layer, Group, FastLayer, and Label are always included in the core build.

Option 1: Import from core and import shape files

import VueKonva from 'vue-konva/core';
import 'konva/lib/shapes/Rect';
import 'konva/lib/shapes/Circle';
import 'konva/lib/shapes/Text';

const app = createApp(App);
app.use(VueKonva);

Option 2: Individual component imports

import { Stage, Layer, Rect, Circle } from 'vue-konva/core';
import 'konva/lib/shapes/Rect';
import 'konva/lib/shapes/Circle';

Install vue-konva and konva using npm. Choose the version compatible with your Vue installation.

For Vue 3:

npm install vue-konva konva --save

For Vue 2:

npm install vue-konva@2 konva --save

To use Vue Konva in your Vue application, install the plugin and use the install method (typically via app.use(VueKonva, options)).

By default, the plugin uses a standard prefix for all Konva components. You can customize this prefix and register custom Konva nodes during installation.

Configuration Options

• prefix: A string used as a prefix for all registered components. If not provided, it defaults to the internal componentPrefix.
• customNodes: An object where keys are the names of your custom nodes and values are the KonvaNodeConstructor for those nodes. These will be registered as components using the configured prefix.

You can install VueKonva as a plugin in your Vue application. This registers all Konva components (like Stage, Rect, Circle, etc.) globally. You can optionally provide a prefix to change the component name prefix or customNodes to register custom Konva node constructors as components.

By default, components are registered using the v-konva prefix (e.g., <v-konva-stage>).

All vue-konva components correspond to Konva components with a v- prefix. You can pass Konva configuration parameters via the :config prop.

Core shapes include: v-rect, v-circle, v-ellipse, v-line, v-image, v-text, v-text-path, v-star, v-label, v-path, and v-regular-polygon.

<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>

To access the underlying Konva node instances, use Vue's ref attribute and call the .getNode() method on the component reference.

<template>
  <v-stage ref="stage">
    <v-layer ref="layer">
      <v-rect ref="rect" />
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  mounted() {
    const stage = this.$refs.stage.getNode();
    const layer = this.$refs.layer.getNode();
    const rect = this.$refs.rect.getNode();
  },
};
</script>

You can register your own Konva node classes to use them as Vue components by passing a customNodes object to the VueKonva plugin options. The keys in the object define the component names.

import Vue from 'vue';
import VueKonva from 'vue-konva';

class MyRect extends Konva.Rect {
  constructor() {
    super();
    console.log('MyRect');
  }
}

Vue.use(VueKonva, {
    customNodes: { MyRect }
});

// In template:
// <v-my-rect />

If the default v- prefix conflicts with other libraries, you can specify a custom prefix when installing the plugin.

import Vue from 'vue';
import VueKonva from 'vue-konva';

Vue.use(VueKonva, { prefix: 'Konva'});

// In template:
// <konva-stage ref="stage" :config="stage"></konva-stage>

When calling app.use(VueKonva, options), you can pass an options object with the following keys:

• prefix (string): A custom string to use as the prefix for all registered Konva components. If not provided, it defaults to the internal componentPrefix.
• customNodes (Record<string, KonvaNodeConstructor>): An object mapping names to custom Konva node constructors. These will be registered as global components using the configured prefix.