# vue-konva
**Repository Path**: yt2018_admin/vue-konva
## Basic Information
- **Project Name**: vue-konva
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-27
- **Last Updated**: 2025-08-27
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Vue Konva
Vue Konva is a JavaScript library for drawing complex canvas graphics using Vue.
It provides declarative and reactive bindings to the [Konva Framework](https://konvajs.org/).
All `vue-konva` components correspond to `Konva` components of the same name with the prefix 'v-'. All the parameters available for `Konva` objects can add as `config` in the prop for corresponding `vue-konva` components.
Core shapes are: `v-rect`, `v-circle`, `v-ellipse`, `v-line`, `v-image`, `v-text`, `v-text-path`, `v-star`, `v-label`, `v-path`, `v-regular-polygon`.
Also you can create custom shape.
To get more info about `Konva` you can read [Konva Overview](https://konvajs.org/docs/overview.html).
## Documentation / live edit
See [Tutorials page](https://konvajs.org/docs/vue/)
## Quick Start
[Vue.js](https://vuejs.org) version 2.4+ is required.
### 1 Install via npm
`vue@3`:
```npm
npm install vue-konva konva --save
```
`vue@2`:
```npm
npm install vue-konva@2 konva --save
```
### 2 Import and use VueKonva
`vue@3`:
```js
import { createApp } from 'vue';
import App from './App.vue';
import VueKonva from 'vue-konva';
const app = createApp(App);
app.use(VueKonva);
app.mount('#app');
```
`vue@2`:
```javascript
import Vue from 'vue';
import VueKonva from 'vue-konva';
Vue.use(VueKonva);
```
### 3 Reference in your component templates
```html
```
```javascript
```
### Or use a CDN
```html
```
# Core API
## Getting reference to Konva objects
You can use `ref` feature from `vue`.
```html
```
### Strict mode
By default `vue-konva` works in "non-strict" mode. If you changed a property **manually** (or by user action like `drag&drop`) properties of the node will be not matched with properties passed as `config`. `vue-konva` updates ONLY changed properties.
In strict mode `vue-konva` will update all properties of the nodes to the values that you provided in `config`, no matter changed they or not.
You should decide what mode is better in your actual use case.
To enable strict mode pass \_\_useStrictMode attribute:
```html
```
## Configurable prefix
By default `vue-konva` is using `v-` prefix for all components.
You can use your own prefix if default one conflicts with some other libs or your components.
```javascript
import Vue from 'vue';
import VueKonva from 'vue-konva'
Vue.use(VueKonva, { prefix: 'Konva'});
// in template:
```
## Custom Konva Nodes
By passing a `Record Node>` object to `customNodes` in options, you can use your own konva node classes in Vue Konva.
```js
import Vue from 'vue';
import VueKonva from 'vue-konva'
class MyRect extends Konva.Rect {
constructor() {
super()
console.log('MyRect')
}
}
Vue.use(VueKonva, {
// The keys are used as component names.
customNodes: { MyRect }
})
// in template:
```
## Change log
The change log can be found on the [Releases page](https://github.com/konvajs/vue-konva/releases).