{"_id":"@bernie_signagent/vue-konva","_rev":"8-4cb7f36835d95907991f4f1d342b3af8","name":"@bernie_signagent/vue-konva","dist-tags":{"latest":"0.0.1"},"versions":{"3.2.1":{"name":"@bernie_signagent/vue-konva","version":"3.2.1","keywords":["vue","konva","canvas"],"author":{"name":"Rafael Escala","email":"rafaesc92@gmail.com"},"license":"MIT","_id":"@bernie_signagent/vue-konva@3.2.1","maintainers":[{"name":"bernie_signagent","email":"bernie@signagent.com"}],"homepage":"https://github.com/konvajs/vue-konva#readme","bugs":{"url":"https://github.com/konvajs/vue-konva/issues"},"dist":{"shasum":"95dc9cd938b4ff9a7163be0d1b518e37ae0d9bbb","tarball":"https://registry.npmjs.org/@bernie_signagent/vue-konva/-/vue-konva-3.2.1.tgz","fileCount":15,"integrity":"sha512-dJUnIRCdFEbvUD/49MlSzqWKCZ3cn5niwt1Hx9sC1j28QcgSvWQzk0spWG4iXcu53pdtCkRM9dFLAs2WA2eYhA==","signatures":[{"sig":"MEQCIG7M6ECIa60Ii2C3c012/D5hcAji3jw5Ht7fYrbsWKJEAiBvMTeIQaO+lu4v3bUR/+5dCoeKo7xotfpumX5uQ2iisQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29183},"main":"dist/savue-konva.umd.js","types":"dist/index.d.ts","vetur":{"tags":"vetur/tags.json","attributes":"vetur/attributes.json"},"module":"dist/savue-konva.mjs","engines":{"npm":">= 3.0.0","node":">= 4.0.0"},"exports":{"types":"./dist/index.d.ts","import":"./dist/savue-konva.mjs","require":"./dist/savue-konva.umd.js"},"funding":[{"url":"https://www.patreon.com/lavrton","type":"patreon"},{"url":"https://opencollective.com/konva","type":"opencollective"},{"url":"https://github.com/sponsors/lavrton","type":"github"}],"gitHead":"a2abc885dd4b1b8c658644979aefb9dfd5cefa95","scripts":{"tsc":"tsc --project tsconfig.json","test":"vitest","build":"vite build && npm run tsc"},"_npmUser":{"name":"bernie_signagent","email":"bernie@signagent.com"},"repository":{"url":"git+https://github.com/konvajs/vue-konva.git","type":"git"},"_npmVersion":"10.2.0","description":"Vue binding to canvas element via Konva framework","directories":{},"_nodeVersion":"21.1.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"@bernie_signagent/konva":"^0.99.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","vite":"^5.4.11","jsdom":"^25.0.1","canvas":"^2.11.2","vitest":"^2.1.5","typescript":"^5.6.3","@types/node":"^22.9.0","@vue/test-utils":"^2.4.6","vite-plugin-dts":"^4.3.0"},"peerDependencies":{"vue":"^3"},"_npmOperationalInternal":{"tmp":"tmp/vue-konva_3.2.1_1753118966442_0.9777519324101589","host":"s3://npm-registry-packages-npm-production"}},"3.2.2":{"name":"@bernie_signagent/vue-konva","version":"3.2.2","keywords":["vue","konva","canvas"],"author":{"name":"Rafael Escala","email":"rafaesc92@gmail.com"},"license":"MIT","_id":"@bernie_signagent/vue-konva@3.2.2","maintainers":[{"name":"bernie_signagent","email":"bernie@signagent.com"}],"homepage":"https://github.com/konvajs/vue-konva#readme","bugs":{"url":"https://github.com/konvajs/vue-konva/issues"},"dist":{"shasum":"f0c484548add828008b83e508c611c9df88bf322","tarball":"https://registry.npmjs.org/@bernie_signagent/vue-konva/-/vue-konva-3.2.2.tgz","fileCount":15,"integrity":"sha512-eMc0a4FKw/dCbRdIQx9JVb3NqdWSzmXoNSCjQ6O6at50xjvYGIMOj1PJAM3SWVG5XxxQJs9H/ErQ0STZIieQ+w==","signatures":[{"sig":"MEUCIQCIJkAxW0FBTu/3+aEOk4o+4cbzMD3IwLuOU3psUaSqmQIgUo2OAjy9PxRgbAV1Au/S2TAbvb+V39iwXcTjLUYZvXU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29183},"main":"dist/savue-konva.umd.js","types":"dist/index.d.ts","vetur":{"tags":"vetur/tags.json","attributes":"vetur/attributes.json"},"module":"dist/savue-konva.mjs","engines":{"npm":">= 3.0.0","node":">= 4.0.0"},"exports":{"types":"./dist/index.d.ts","import":"./dist/savue-konva.mjs","require":"./dist/savue-konva.umd.js"},"funding":[{"url":"https://www.patreon.com/lavrton","type":"patreon"},{"url":"https://opencollective.com/konva","type":"opencollective"},{"url":"https://github.com/sponsors/lavrton","type":"github"}],"gitHead":"a2abc885dd4b1b8c658644979aefb9dfd5cefa95","scripts":{"tsc":"tsc --project tsconfig.json","test":"vitest","build":"vite build && npm run tsc"},"_npmUser":{"name":"bernie_signagent","email":"bernie@signagent.com"},"repository":{"url":"git+https://github.com/konvajs/vue-konva.git","type":"git"},"_npmVersion":"10.2.0","description":"Vue binding to canvas element via Konva framework","directories":{},"_nodeVersion":"21.1.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"@bernie_signagent/konva":"^0.99.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","vite":"^5.4.11","jsdom":"^25.0.1","canvas":"^2.11.2","vitest":"^2.1.5","typescript":"^5.6.3","@types/node":"^22.9.0","@vue/test-utils":"^2.4.6","vite-plugin-dts":"^4.3.0"},"peerDependencies":{"vue":"^3"},"_npmOperationalInternal":{"tmp":"tmp/vue-konva_3.2.2_1753119137290_0.9647144049950012","host":"s3://npm-registry-packages-npm-production"}},"0.0.1":{"name":"@bernie_signagent/vue-konva","version":"0.0.1","keywords":["vue","konva","canvas"],"author":{"name":"Rafael Escala","email":"rafaesc92@gmail.com"},"license":"MIT","_id":"@bernie_signagent/vue-konva@0.0.1","maintainers":[{"name":"bernie_signagent","email":"bernie@signagent.com"}],"homepage":"https://github.com/konvajs/vue-konva#readme","bugs":{"url":"https://github.com/konvajs/vue-konva/issues"},"dist":{"shasum":"0d27f9fd2ee1a56e9b2b0f4f9e601eb4c741b898","tarball":"https://registry.npmjs.org/@bernie_signagent/vue-konva/-/vue-konva-0.0.1.tgz","fileCount":15,"integrity":"sha512-MX9UeJelcZG/fZD3qhYC8WbQtQBvj5jlWSvQuJO5CR7WswJ9g6rv880n5oK7HhWE6KPTmzleZFxKy/vobFYLGg==","signatures":[{"sig":"MEUCIFfNmeajmociFydmEroCpiGRvG3/5hRCRz5WJLoDUw4lAiEAk81mPN3fPuVpTvYx6wPMOczThkwUPcucmjKXVXgiCeg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":502550},"main":"dist/savue-konva.umd.js","types":"dist/index.d.ts","vetur":{"tags":"vetur/tags.json","attributes":"vetur/attributes.json"},"module":"dist/savue-konva.mjs","engines":{"npm":">= 3.0.0","node":">= 4.0.0"},"exports":{"types":"./dist/index.d.ts","import":"./dist/savue-konva.mjs","require":"./dist/savue-konva.umd.js"},"funding":[{"url":"https://www.patreon.com/lavrton","type":"patreon"},{"url":"https://opencollective.com/konva","type":"opencollective"},{"url":"https://github.com/sponsors/lavrton","type":"github"}],"gitHead":"a2abc885dd4b1b8c658644979aefb9dfd5cefa95","scripts":{"tsc":"tsc --project tsconfig.json","test":"vitest","build":"vite build && npm run tsc"},"_npmUser":{"name":"bernie_signagent","email":"bernie@signagent.com"},"repository":{"url":"git+https://github.com/konvajs/vue-konva.git","type":"git"},"_npmVersion":"10.2.0","description":"Vue binding to canvas element via Konva framework","directories":{},"_nodeVersion":"21.1.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"@bernie_signagent/konva":"^0.99.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","vite":"^5.4.11","jsdom":"^25.0.1","canvas":"^2.11.2","vitest":"^2.1.5","typescript":"^5.6.3","@types/node":"^22.9.0","@vue/test-utils":"^2.4.6","vite-plugin-dts":"^4.3.0"},"peerDependencies":{"vue":"^3"},"_npmOperationalInternal":{"tmp":"tmp/vue-konva_0.0.1_1753181686752_0.8081891015790432","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-07-21T17:29:26.441Z","modified":"2025-12-01T12:01:48.089Z","3.2.0":"2025-07-21T17:24:06.097Z","3.2.1":"2025-07-21T17:29:26.675Z","3.2.2":"2025-07-21T17:32:17.535Z","0.0.1":"2025-07-22T10:54:46.938Z"},"bugs":{"url":"https://github.com/konvajs/vue-konva/issues"},"author":{"name":"Rafael Escala","email":"rafaesc92@gmail.com"},"license":"MIT","homepage":"https://github.com/konvajs/vue-konva#readme","keywords":["vue","konva","canvas"],"repository":{"url":"git+https://github.com/konvajs/vue-konva.git","type":"git"},"description":"Vue binding to canvas element via Konva framework","maintainers":[{"email":"bernie@signagent.com","name":"signagent_bernie"}],"readme":"# Vue Konva\n\n<span class=\"badge-npmdownloads\">\n  <a href=\"https://www.npmjs.com/package/vue-konva\">\n    <img src=\"https://img.shields.io/npm/v/vue-konva.svg\" alt=\"Version\">\n  </a>\n  <a href=\"https://www.npmjs.com/package/vue-konva\">\n    <img src=\"https://img.shields.io/npm/l/vue-konva.svg\" alt=\"License\">\n  </a>\n  </span>\n\n![ReactKonva Logo](https://github.com/rafaesc/vue-konva/raw/master/vue-konva.png)\n\nVue Konva is a JavaScript library for drawing complex canvas graphics using Vue.\n\nIt provides declarative and reactive bindings to the [Konva Framework](https://konvajs.org/).\n\nAll `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.\n\nCore 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`.\nAlso you can create custom shape.\n\nTo get more info about `Konva` you can read [Konva Overview](https://konvajs.org/docs/overview.html).\n\n## Documentation / live edit\n\nSee [Tutorials page](https://konvajs.org/docs/vue/)\n\n## Quick Start\n\n[Vue.js](https://vuejs.org) version 2.4+ is required.\n\n### 1 Install via npm\n\n`vue@3`:\n\n```npm\nnpm install vue-konva konva --save\n```\n\n`vue@2`:\n\n```npm\nnpm install vue-konva@2 konva --save\n```\n\n### 2 Import and use VueKonva\n\n`vue@3`:\n\n```js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport VueKonva from 'vue-konva';\n\nconst app = createApp(App);\napp.use(VueKonva);\napp.mount('#app');\n```\n\n`vue@2`:\n\n```javascript\nimport Vue from 'vue';\nimport VueKonva from 'vue-konva';\n\nVue.use(VueKonva);\n```\n\n### 3 Reference in your component templates\n\n```html\n<template>\n  <v-stage :config=\"configKonva\">\n    <v-layer>\n      <v-circle :config=\"configCircle\"></v-circle>\n    </v-layer>\n  </v-stage>\n</template>\n```\n\n```javascript\n<script>\nexport default {\n  data() {\n    return {\n      configKonva: {\n        width: 200,\n        height: 200\n      },\n      configCircle: {\n        x: 100,\n        y: 100,\n        radius: 70,\n        fill: \"red\",\n        stroke: \"black\",\n        strokeWidth: 4\n      }\n    };\n  }\n};\n\n</script>\n```\n\n### Or use a CDN\n\n```html\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n    />\n    <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\" />\n  </head>\n  <body>\n    <div id=\"app\">\n      <v-stage ref=\"stage\" :config=\"configKonva\">\n        <v-layer ref=\"layer\">\n          <v-circle :config=\"configCircle\"></v-circle>\n        </v-layer>\n      </v-stage>\n    </div>\n    <!--1. Link Vue Javascript & Konva-->\n    <script src=\"https://unpkg.com/vue/dist/vue.js\"></script>\n    <script src=\"https://unpkg.com/konva/konva.js\"></script>\n    <!--2. Link VueKonva Javascript -->\n    <script src=\"https://unpkg.com/vue-konva/umd/vue-konva.min.js\"></script>\n    <script>\n      // 3. Create the Vue instance\n      new Vue({\n        el: '#app',\n        data: {\n          configKonva: {\n            width: 200,\n            height: 200,\n          },\n          configCircle: {\n            x: 100,\n            y: 100,\n            radius: 70,\n            fill: 'red',\n            stroke: 'black',\n            strokeWidth: 4,\n          },\n        },\n      });\n    </script>\n  </body>\n</html>\n```\n\n# Core API\n\n## Getting reference to Konva objects\n\nYou can use `ref` feature from `vue`.\n\n```html\n<template>\n  <v-stage ref=\"stage\">\n    <v-layer ref=\"layer\">\n      <v-rect ref=\"rect\" />\n    </v-layer>\n  </v-stage>\n</template>\n\n<script>\n  const width = window.innerWidth;\n  const height = window.innerHeight;\n\n  export default {\n    mounted() {\n      const stage = this.$refs.stage.getNode();\n      const layer = this.$refs.layer.getNode();\n      const rect = this.$refs.rect.getNode();\n    },\n  };\n</script>\n```\n\n### Strict mode\n\nBy 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.\n\nIn 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.\n\nYou should decide what mode is better in your actual use case.\n\nTo enable strict mode pass \\_\\_useStrictMode attribute:\n\n```html\n<v-rect :config=\"{}\" __useStrictMode></v-rect>\n```\n\n## Configurable prefix\n\nBy default `vue-konva` is using `v-` prefix for all components.\n\nYou can use your own prefix if default one conflicts with some other libs or your components.\n\n```javascript\nimport Vue from 'vue';\nimport VueKonva from 'vue-konva'\n\nVue.use(VueKonva, { prefix: 'Konva'});\n\n// in template:\n<konva-stage ref=\"stage\" :config=\"stage\">\n```\n\n## Custom Konva Nodes\n\nBy passing a `Record<string, new (...args: any) => Node<any>>` object to `customNodes` in options, you can use your own konva node classes in Vue Konva.\n\n```js\nimport Vue from 'vue';\nimport VueKonva from 'vue-konva'\n\nclass MyRect extends Konva.Rect {\n  constructor() {\n    super()\n    console.log('MyRect')\n  }\n}\n\nVue.use(VueKonva, {\n    // The keys are used as component names.\n    customNodes: { MyRect }\n})\n\n// in template:\n<v-my-rect />\n```\n\n## Change log\n\nThe change log can be found on the [Releases page](https://github.com/konvajs/vue-konva/releases).\n","readmeFilename":"README.md"}