{"_id":"@alukos/vue-fabric-wrapper","_rev":"1-8ad9d71eeca03fbd52414238ca91c92b","name":"@alukos/vue-fabric-wrapper","dist-tags":{"latest":"0.3.72"},"versions":{"0.3.72":{"name":"@alukos/vue-fabric-wrapper","description":"vue wrapper for fabricjs","keywords":["vuejs","fabricjs","vue-fabric","vue","fabric","canvas","components"],"version":"0.3.72","repository":{"type":"git","url":"git+https://github.com/alukos/vue-fabric-wrapper.git"},"homepage":"https://vue-fabric-wrapper.netlify.com/","author":{"name":"Ben Sladden"},"main":"dist/vue-fabric-wrapper.common.js","unpkg":"dist/vue-fabric-wrapper.umd.min.js","scripts":{"serve":"vue-cli-service serve","build":"rimraf dist && vue-cli-service build","build:lib":"rimraf dist && vue-cli-service build --target lib ./src/components/index.js","lint":"vue-cli-service lint","docs:dev":"vuepress dev docs","docs:build":"vuepress build docs"},"license":"MIT","dependencies":{"fabric":"3.6.3"},"devDependencies":{"@vue/cli-plugin-babel":"4.3.1","@vue/cli-plugin-eslint":"4.3.1","@vue/cli-service":"4.3.1","@vue/eslint-config-prettier":"6.0.0","babel-eslint":"10.1.0","bootstrap-vue":"2.14.0","core-js":"3.6.4","eslint":"6.8.0","eslint-plugin-prettier":"3.1.2","eslint-plugin-vue":"6.2.2","exports-loader":"0.7.0","node-sass":"4.13.1","prettier":"1.19.1","rimraf":"3.0.2","sass-loader":"8.0.2","vue":"2.6.11","vue-template-compiler":"2.6.11","vuepress":"1.3.1"},"gitHead":"83a3eed664d74a4b4221fe12b76f9883b4c11d05","bugs":{"url":"https://github.com/alukos/vue-fabric-wrapper/issues"},"_id":"@alukos/vue-fabric-wrapper@0.3.72","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-c0BXF3d2OoALXLy9dkBNZVM6syJn4tFDeILADY2XIIcT9J6ZHfrOntz2cYAgbRaDAkNQOHrRq0Gvezp0JLw/5g==","shasum":"881543b0ed8c1f3469fd525a1ea0de07644c9c17","tarball":"https://registry.npmjs.org/@alukos/vue-fabric-wrapper/-/vue-fabric-wrapper-0.3.72.tgz","fileCount":11,"unpackedSize":7721465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyzCLCRA9TVsSAnZWagAAeRwP/irl08kMwFRvBMmYNAgl\nc+lbuVwUF+lWzxbM4ovwfuIPN8cEnaSps2+nHXUry+YpdlU5I/Dww0rxAlXi\nARnu8bjHEL8za/jyXjnQ/rNhHli1UyS8MWzPRpngUB/s6vkuPwxihr1ClgXz\nNQyQVAPrpUJb2KYQXEK+yFFUkOiJEmupY/UaXQN7ndcmPhyBSVPChx3b2xDp\nCfD+XEnisSqGsOrI2SkfVUkFGJ6rZ5UnE1k4YG8gs0F3LsuUdeRStAKa22xF\n2IiqOTEcYxVeuFdmwPGtxMVEgbXTTN7+8wMa1AztjxrystXkiyFR4KBVNRWf\nEuVmVGenpwIy/GqV0MSSv1JRLA1nPtIs7XfFWO5qztp4vmDD4xqWrDWVyVZg\nr6Dn0Nbq/G5aWNjJFboRLaZric1vDQgC6BWdLjm2ntBAntenxeF08NcBOGeC\nXaNTy1+AtymtC80o7UnzGIY6AjLCgQBxkVWwheBiMUT6Jc/Un+ZmEg9ZcCOU\nNxRySVepREY25qvTRJFZe/q9HlKalxJEFAaM+hgSZhIvac499P2xp82HvpnN\njdmcfK5hWpk0VLeTGyzcJw1oL+TCyGPPCm2RVHIMY3nY7eC8lPPRb7opuHzN\nNngM07z1CNd8C+4B0UatMIiPeBC95YWibTxw7gH6qI+9iaMWlMWJKa68EkdO\n5FgB\r\n=JQql\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCP1DsQX6EgySA8a0FqVY5/P+W4u9yNVzo2SO+tE9AlOwIgKxnAGuDMYsXbdqw+umTd7rXKIRYIx4Z/9QKYAuxBkHI="}]},"_npmUser":{"name":"alukos","email":"alukos@yandex.ru"},"directories":{},"maintainers":[{"name":"alukos","email":"alukos@yandex.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-fabric-wrapper_0.3.72_1607151754474_0.08608771196922005"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-05T07:02:34.435Z","0.3.72":"2020-12-05T07:02:34.612Z","modified":"2022-04-04T13:41:20.736Z"},"maintainers":[{"name":"alukos","email":"alukos@yandex.ru"}],"description":"vue wrapper for fabricjs","homepage":"https://vue-fabric-wrapper.netlify.com/","keywords":["vuejs","fabricjs","vue-fabric","vue","fabric","canvas","components"],"repository":{"type":"git","url":"git+https://github.com/alukos/vue-fabric-wrapper.git"},"author":{"name":"Ben Sladden"},"bugs":{"url":"https://github.com/alukos/vue-fabric-wrapper/issues"},"license":"MIT","readme":"# vue-fabric-wrapper\n\n<p align=\"center\">\n\t<img src=\"https://flat.badgen.net/github/branches/bensladden/vue-fabric\" alt=\"branches\">\n\t<img src=\"https://flat.badgen.net/github/releases/bensladden/vue-fabric\" alt=\"releases\">\n\t<img src=\"https://flat.badgen.net/github/open-issues/bensladden/vue-fabric\" alt=\"openIssues\">\n\t<img src=\"https://flat.badgen.net/github/last-commit/bensladden/vue-fabric\" alt=\"lastCommit\">\n\t<img src=\"https://flat.badgen.net/github/license/bensladden/vue-fabric\" alt=\"license\">\n</p>\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/c31e91bb-b672-483c-bf98-1582de3cfaec/deploy-status)](https://app.netlify.com/sites/vue-fabric-wrapper/deploys)\n\nStick Man Example: [![Edit StickMan](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/stickman-rltsr?fontsize=14&hidenavigation=1&theme=dark)\n\n\n## Currently implemented the following Fabric Objects:\n  Fabric.Canvas,\n  Fabric.Circle,\n  Fabric.Ellipse,\n  Fabric.Group,\n  Fabric.ImageFromURL,\n  Fabric.Line,\n  Fabric.Path,\n  Fabric.Polygon,\n  Fabric.Polyline,\n  Fabric.Rectangle,\n  Fabric.SVGFromURL,\n  Fabric.Text,\n  Fabric.Triangle\n\n## ⚙️ Installation\n```sh\n$ npm install vue-fabric-wrapper\n```\n## 📄 Documents\n[Link](https://vue-fabric-wrapper.netlify.com/)\n\n## 🚀 How to use in Vue\n\n```vue\n<template>\n  <div id=\"app\">\n    <fabric-canvas>\n      <fabric-circle :id=\"3\"></fabric-circle>\n    </fabric-canvas>\n  </div>\n</template>\n\n<script>\nimport vueFabricWrapper from \"vue-fabric-wrapper\";\n\nexport default {\n  name: \"App\",\n  components: {\n    FabricCanvas: vueFabricWrapper.FabricCanvas,\n    FabricCircle: vueFabricWrapper.FabricCircle\n  }\n};\n</script>\n\n<style>\n#app {\n  font-family: \"Avenir\", Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n</style>\n\n```\n## 🚀 How to use in Nuxt\nCreate Plugin with the following example code\n```\nimport Vue from 'vue';\nimport vueFabricWrapper from 'vue-fabric-wrapper';\n\nVue.component(\"FabricCanvas\", vueFabricWrapper.FabricCanvas)\nVue.component(\"FabricCircle\", vueFabricWrapper.FabricCircle)\n```\n\nAdd this to nuxt.config and use mode client\n```\nmodule.exports = {\n\tplugins: [\n\t\t\t{ src: \"@/plugins/fabric.js\", mode: \"client\" }\n\t\t]\n}\n```\n\nFinally use client-only to render only on the client side\n```\n<template>\n  <client-only>\n    <fabric-canvas>\n      <fabric-circle :id=\"2\"></fabric-circle>\n    </fabric-canvas>\n  </client-only>\n</template>\n\n<script>\nexport default {\n\n};\n</script>\n\n<style>\n</style>\n```\n\n## ⭐️ Show Your Support\nPlease give a ⭐️ if this project helped you!\n\n\n## 👏 Contributing\n\nIf you have any questions or requests or want to contribute to `vue-fabric-wrapper` or other packages, please write the [issue](https://github.com/bensladden/vue-fabric-wrapper/issues) or give me a Pull Request freely.\n\n## 🐞 Bug Report\n\nIf you find a bug, please report to us opening a new [Issue](https://github.com/bensladden/vue-fabric-wrapper/issues) on GitHub.\n\n## ⚙️ Development\n### `npm run serve`\n\nRuns the app in the development mode.<br>\nOpen [http://localhost:8080](http://localhost:8080) to view it in the browser.\n\nThe page will reload if you make edits.<br>\nYou will also see any lint errors in the console.","readmeFilename":"README.md"}