{"_id":"@diadal/vue3-qr-code-styling","_rev":"2-65818f56af4e9c8c3911df8c469bf3bb","name":"@diadal/vue3-qr-code-styling","dist-tags":{"latest":"1.4.7"},"versions":{"1.4.6":{"name":"@diadal/vue3-qr-code-styling","version":"1.4.6","keywords":["qr","qrcode","qr-code","js","qrjs","qrstyling","styling","qrbranding","branding","qrimage","image","qrlogo","logo","design"],"author":{"name":"Diadal","email":"info@diadal.com.ng"},"license":"MIT","_id":"@diadal/vue3-qr-code-styling@1.4.6","maintainers":[{"name":"diadal","email":"info@diadal.com.ng"}],"homepage":"https://github.com/diadal/vue3-qr-code-styling","bugs":{"url":"https://github.com/diadal/vue3-qr-code-styling/issues"},"dist":{"shasum":"6afec047c51bde7631ec8b62b3c7a1d14107dd50","tarball":"https://registry.npmjs.org/@diadal/vue3-qr-code-styling/-/vue3-qr-code-styling-1.4.6.tgz","fileCount":39,"integrity":"sha512-hZh1SvyIk0mjOUFhcN4L86SY9LplSGKDaH3l7+wX4PzOxlhbfcSzeIthzu0x40hoOZRIubpjy3BwYSURXr5iBQ==","signatures":[{"sig":"MEYCIQC9fBgmoIRy9qwIMMHB4ubK3t73dQPsceLtrHqc+5rM/wIhAPIx2pK9U1CIdZQKVOTbPZN2GunTQIE6xv/QAhkIC8hA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":367172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipFScACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovvQ//aHadbSsoLhHOoY8X+e1EmmSkypJIJGnyFJ7c/X1EvV+8mw+n\r\n4IiFyLjPclutK8w3lFvg5nZekYhnejJxlIq+vaqZ+muGWuKSGap8U3fzaYCB\r\n9RV8GZMRpxNIsEZF2OLzB+PiVxWXb3BKKQRmewm88a+avjQwWt4+2BS5CxRc\r\nlZyvK0L+ZzGaKKu4s247E/IINtIvU5zx5NNiHsNMmzNt1i2ThcocQCZitKAf\r\nJezG3zK8bwAK8M+m4UzMzmVkVuLf8BsU8KLSjaN9+vyuKZBa3W+qEl7awRfr\r\n4BGJza6dimaqbiEJDPTSnzW0fvgf6+orkxYbCV3xtxxHtwRWVBG0uNIDfRB2\r\nJX6RD0WXELrZQQehXalLuVE0lPkdwe+VOjagSWQxEZciNnI4ssROm+g0ruub\r\ny4AjUs7X0vKRXDthULMep9xoP3VOOHNeyj5kRS8g7DL3dJ9RTxm/30xoQlDj\r\nIJONRzKvexcJxLd/hVmREpIv8S7Yz+SVFAfq2vkVf7A4DvjufKcpAOCr11mw\r\nlegBMsr9H4qWEZhV9kX9/xl/1MY7QTlxgBMntXx0D69NkIR+F5bgvnGMuTDB\r\n1Pv9P4shbLgE7dCOl1wGvveVd9LUsPgQCc1Z2DlL6rfHcocsTkaJL/zeivOs\r\ngyI7SM1sBycJNqZCCWF5WM86rjK6V/zqB84=\r\n=yUB1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"src/index.js","types":"src/index.d.ts","gitHead":"3c4d238e462a0d992bb13aa17589ac958579f3e6","private":false,"scripts":{"test":"jest","build":"webpack --mode=production --config webpack.config.build.js && copyfiles -f ./src/*.vue lib","build:dev":"webpack --mode=development --config webpack.config.build.js"},"_npmUser":{"name":"diadal","email":"info@diadal.com.ng"},"repository":{"url":"git+https://github.com/diadal/vue3-qr-code-styling.git","type":"git"},"_npmVersion":"8.6.0","description":"Add a style and an image to your QR code Vue3","directories":{},"_nodeVersion":"18.0.0","dependencies":{"vue":"^3.0.6","vue-loader":"^16.1.2","qrcode-generator":"^1.4.3","@vue/compiler-sfc":"^3.0.6"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^26.6.3","canvas":"^2.6.1","eslint":"^7.17.0","ts-jest":"^26.4.4","webpack":"^5.24.2","prettier":"^2.2.1","ts-loader":"^8.0.17","typescript":"^4.2.2","webpack-cli":"^4.5.0","eslint-loader":"^4.0.2","webpack-merge":"^5.7.3","eslint-plugin-jest":"^24.1.3","webpack-dev-server":"^3.11.2","html-webpack-plugin":"^4.5.1","clean-webpack-plugin":"^3.0.0","eslint-config-prettier":"^7.1.0","eslint-plugin-prettier":"^3.3.1","@typescript-eslint/parser":"^4.13.0","jest-environment-jsdom-fifteen":"^1.0.0","@typescript-eslint/eslint-plugin":"^4.13.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-qr-code-styling_1.4.6_1654936731832_0.39277998405635617","host":"s3://npm-registry-packages"}},"1.4.7":{"name":"@diadal/vue3-qr-code-styling","version":"1.4.7","description":"Add a style and an image to your QR code Vue3","type":"module","main":"./lib/index.umd.cjs","module":"./lib/index.js","types":"./lib/index.d.ts","exports":{".":{"types":"./lib/index.d.ts","import":"./lib/index.js","require":"./lib/index.umd.cjs"}},"dependencies":{"qrcode-generator":"^2.0.4"},"overrides":{"esbuild":"^0.28.1"},"peerDependencies":{"vue":"^3.5.0"},"devDependencies":{"@eslint/js":"^9.39.0","@types/node":"^26.0.0","@vitejs/plugin-vue":"^6.0.7","@vue/eslint-config-typescript":"^14.9.0","eslint":"^9.39.0","eslint-config-prettier":"^10.1.8","eslint-plugin-vue":"^10.9.2","prettier":"^3.8.4","typescript":"^5.9.3","typescript-eslint":"^8.61.1","vite":"^7.1.12","vite-plugin-dts":"^4.5.4","vue":"^3.5.38","vue-tsc":"^2.2.10"},"scripts":{"dev":"vite","build":"vue-tsc --noEmit && vite build","preview":"vite preview","lint":"eslint . --fix","check-up":"npx npm-check-updates -u && npm install --no-audit --no-fund"},"repository":{"type":"git","url":"git+https://github.com/diadal/vue3-qr-code-styling.git"},"keywords":["qr","qrcode","qr-code","js","qrjs","qrstyling","styling","qrbranding","branding","qrimage","image","qrlogo","logo","design"],"author":{"name":"Diadal","email":"info@diadal.com.ng"},"private":false,"license":"MIT","bugs":{"url":"https://github.com/diadal/vue3-qr-code-styling/issues"},"homepage":"https://github.com/diadal/vue3-qr-code-styling","gitHead":"e6d53ebac1006be50a2779dce26e205aa84df340","_id":"@diadal/vue3-qr-code-styling@1.4.7","_nodeVersion":"22.22.1","_npmVersion":"11.14.1","dist":{"integrity":"sha512-PPV3WgFGS4Kusg5Rzy3cZJatiBXixaKW9S8Yzhd5VQ3JfknPeEtngek77yZksYI2eMYppd4FYO+Ui0Sty9BioQ==","shasum":"2da2e183b3412e6dbfebe660185a0de0afc5c5de","tarball":"https://registry.npmjs.org/@diadal/vue3-qr-code-styling/-/vue3-qr-code-styling-1.4.7.tgz","fileCount":66,"unpackedSize":814489,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID+mcv3NoduGeFYsE5oSrdbK6j45XUfc0RI12hfDwK+6AiEA1/ru0Y27lfuvQQJJO/zQQrGwlxfBmmHzp39f89zhUyU="}]},"_npmUser":{"name":"diadal","email":"info@diadal.com.ng"},"directories":{},"maintainers":[{"name":"diadal","email":"info@diadal.com.ng"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue3-qr-code-styling_1.4.7_1782105658287_0.6766247269163361"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-11T08:38:51.774Z","modified":"2026-06-22T05:20:58.563Z","1.4.6":"2022-06-11T08:38:52.131Z","1.4.7":"2026-06-22T05:20:58.448Z"},"bugs":{"url":"https://github.com/diadal/vue3-qr-code-styling/issues"},"author":{"name":"Diadal","email":"info@diadal.com.ng"},"license":"MIT","homepage":"https://github.com/diadal/vue3-qr-code-styling","keywords":["qr","qrcode","qr-code","js","qrjs","qrstyling","styling","qrbranding","branding","qrimage","image","qrlogo","logo","design"],"repository":{"type":"git","url":"git+https://github.com/diadal/vue3-qr-code-styling.git"},"description":"Add a style and an image to your QR code Vue3","maintainers":[{"name":"diadal","email":"info@diadal.com.ng"}],"readme":"[![Known Vulnerabilities](https://snyk.io/test/github/diadal/vue3-qr-code-styling/badge.svg)](https://snyk.io/test/github/diadal/vue3-qr-code-styling)\n\n# Vue3 QR Code Styling\n\n[![Version](https://img.shields.io/npm/v/vue3-qr-code-styling.svg)](https://www.npmjs.org/package/vue3-qr-code-styling)\n\nJavaScript library for generating QR codes with a logo and styling.\n\nthis clone copy of https://qr-code-styling.com\n\nIf you have issues / suggestions / notes / questions, please open an issue or contact me. Let's create a cool library together.\n\n### Examples\n\n<p float=\"left\">\n<img style=\"display:inline-block\" src=\"https://raw.githubusercontent.com/diadal/vue3-qr-code-styling/master/src/assets/facebook_example_new.png\" width=\"240\" />\n<img style=\"display:inline-block\" src=\"https://raw.githubusercontent.com/diadal/vue3-qr-code-styling/master/src/assets/qr_code_example.png\" width=\"240\" />\n<img style=\"display:inline-block\" src=\"https://raw.githubusercontent.com/diadal/vue3-qr-code-styling/master/src/assets/telegram_example_new.png\" width=\"240\" />\n</p>\n\n### Installation\n\n```\nnpm install @diadal/vue3-qr-code-styling\nor\nyarn add @diadal/vue3-qr-code-styling\n```\n\n### Usage\n\n```HTML\n<template>\n  <div>\n   <VueQr3\n          :width=\"200\"\n          :height=\"200\"\n          data=\"https://diadal.com.ng\"\n          :qrOptions=\"{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }\"\n          :imageOptions=\"{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }\"\n          :dotsOptions=\"{\n            type: 'dots',\n            color: '#26249a',\n            gradient: {\n              type: 'linear',\n              rotation: 0,\n              colorStops: [\n                { offset: 0, color: '#26249a' },\n                { offset: 1, color: '#26249a' },\n              ],\n            },\n          }\"\n          :backgroundOptions=\"{ color: '#ffffff' }\"\n          image=\"https://diadal.com.ng/icons/favicon-96x96.png\"\n          :cornersSquareOptions=\"{ type: 'dot', color: '#000000' }\"\n          :cornersDotOptions=\"{ type: undefined, color: '#000000' }\"\n          fileExt=\"png\"\n          :download=\"true\"\n          myclass=\"my-qur\"\n          imgclass=\"img-qr\"\n          downloadButton=\"my-button\"\n          :downloadOptions=\"{ name: 'vqr', extension: 'png' }\"\n        >\n    </VueQr3>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  onBeforeUnmount,\n  defineAsyncComponent\n} from 'vue'\n\nexport default defineComponent({\n  name: 'VueQr3',\n  components: {\n    VueQr3: defineAsyncComponent(() =>\n      Promise.resolve(import('vue3-qr-code-styling'))\n    )\n  },\n  setup () {\n    return {\n    }\n  }\n})\n</script>\n\n<style lang=\"sass\">\n.my-qur\n//   overflow-wrap: anywhere\n</style>\n```\n\n### API Documentation\n\n#### VQRCodeStyling instance\n\n`new VQRCodeStyling(options) => VQRCodeStyling`\n\n| Param   | Type   | Description |\n| ------- | ------ | ----------- |\n| options | object | Init object |\n\n`options` structure\n\n| Property                | Type   | Default Value | Description                                           |\n| ----------------------- | ------ | ------------- | ----------------------------------------------------- |\n| width                   | number | `300`         | Size of canvas                                        |\n| height                  | number | `300`         | Size of canvas                                        |\n| download                | boolean| false         | To endable download button                            |\n| myclass                 | string | ''            | Image DIV class                                       |\n| imgclass                | string | ''            | Image class                                           |\n| downloadButton          | string | ''            | download button class                                 |\n| downloadOptions         | object |               | download option name and extension                    |\n| data                    | string |               | The date will be encoded to the QR code               |\n| image                   | string |               | The image will be copied to the center of the QR code |\n| margin                  | number | `0`           | Margin around canvas                                  |\n| qrOptions               | object |               | Options will be passed to `qrcode-generator` lib      |\n| imageOptions            | object |               | Specific image options, details see below             |\n| dotsOptions             | object |               | Dots styling options                                  |\n| cornersSquareOptions    | object |               | Square in the corners styling options                 |\n| cornersDotOptionsHelper | object |               | Dots in the corners styling options                   |\n| backgroundOptions       | object |               | QR background styling options                         |\n\n`options.qrOptions` structure\n\n| Property             | Type                                               | Default Value |\n| -------------------- | -------------------------------------------------- | ------------- |\n| typeNumber           | number (`0 - 40`)                                  | `0`           |\n| mode                 | string (`'Numeric' 'Alphanumeric' 'Byte' 'Kanji'`) |\n| errorCorrectionLevel | string (`'L' 'M' 'Q' 'H'`)                         | `'Q'`         |\n\n`options.imageOptions` structure\n\n| Property           | Type                                    | Default Value | Description                                                                    |\n| ------------------ | --------------------------------------- | ------------- | ------------------------------------------------------------------------------ |\n| hideBackgroundDots | boolean                                 | `true`        | Hide all dots covered by the image                                             |\n| imageSize          | number                                  | `0.4`         | Coefficient of the image size. Not recommended to use ove 0.5. Lower is better |\n| margin             | number                                  | `0`           | Margin of the image in px                                                      |\n| crossOrigin        | string(`'anonymous' 'use-credentials'`) |               | Set \"anonymous\" if you want to download QR code from other origins.            |\n\n`options.dotsOptions` structure\n\n| Property | Type                                                                           | Default Value | Description         |\n| -------- | ------------------------------------------------------------------------------ | ------------- | ------------------- |\n| color    | string                                                                         | `'#000'`      | Color of QR dots    |\n| gradient | object                                                                         |               | Gradient of QR dots |\n| type     | string (`'rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded'`) | `'square'`    | Style of QR dots    |\n\n`options.backgroundOptions` structure\n\n| Property | Type   | Default Value |\n| -------- | ------ | ------------- |\n| color    | string | `'#fff'`      |\n| gradient | object |\n\n`options.cornersSquareOptions` structure\n\n| Property | Type                                      | Default Value | Description                |\n| -------- | ----------------------------------------- | ------------- | -------------------------- |\n| color    | string                                    |               | Color of Corners Square    |\n| gradient | object                                    |               | Gradient of Corners Square |\n| type     | string (`'dot' 'square' 'extra-rounded'`) |               | Style of Corners Square    |\n\n`options.cornersDotOptions` structure\n\n| Property | Type                      | Default Value | Description             |\n| -------- | ------------------------- | ------------- | ----------------------- |\n| color    | string                    |               | Color of Corners Dot    |\n| gradient | object                    |               | Gradient of Corners Dot |\n| type     | string (`'dot' 'square'`) |               | Style of Corners Dot    |\n\nGradient structure\n\n`options.dotsOptions.gradient`\n\n`options.backgroundOptions.gradient`\n\n`options.cornersSquareOptions.gradient`\n\n`options.cornersDotOptions.gradient`\n\n| Property   | Type                         | Default Value | Description                                                                            |\n| ---------- | ---------------------------- | ------------- | -------------------------------------------------------------------------------------- |\n| type       | string (`'linear' 'radial'`) | \"linear\"      | Type of gradient spread                                                                |\n| rotation   | number                       | 0             | Rotation of gradient in radians (Math.PI === 180 degrees)                              |\n| colorStops | array of objects             |               | Gradient colors. Example `[{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]` |\n\nGradient colorStops structure\n\n`options.dotsOptions.gradient.colorStops[]`\n\n`options.backgroundOptions.gradient.colorStops[]`\n\n`options.cornersSquareOptions.gradient.colorStops[]`\n\n`options.cornersDotOptions.gradient.colorStops[]`\n\n| Property | Type             | Default Value | Description                         |\n| -------- | ---------------- | ------------- | ----------------------------------- |\n| offset   | number (`0 - 1`) |               | Position of color in gradient range |\n| color    | string           |               | Color of stop in gradient range     |\n\n#### VQRCodeStyling methods\n\n`VQRCodeStyling.append(container) => void`\n\n| Param     | Type        | Description                                              |\n| --------- | ----------- | -------------------------------------------------------- |\n| container | DOM element | This container will be used for appending of the QR code |\n\n`VQRCodeStyling.update(options) => void`\n\n| Param   | Type   | Description                            |\n| ------- | ------ | -------------------------------------- |\n| options | object | The same options as for initialization |\n\n`VQRCodeStyling.download(downloadOptions) => void`\n\n| Param           | Type   | Description                                            |\n| --------------- | ------ | ------------------------------------------------------ |\n| downloadOptions | object | Options with extension and name of file (not required) |\n\n`downloadOptions` structure\n\n| Property  | Type                           | Default Value | Description                 |\n| --------- | ------------------------------ | ------------- | --------------------------- |\n| name      | string                         | `'qr'`        | Name of the downloaded file |\n| extension | string (`'png' 'jpeg' 'webp'`) | `'png'`       | File extension              |\n\nif any issue [check](https://github.com/diadal/vue3-qr-code-styling/issues)\n\n_also you can buy me a coffee @ [Patreon](https://www.patreon.com/diadal)_\n\n### License\n\n[MIT License](https://raw.githubusercontent.com/diadal/vue3-qr-code-styling/master/LICENSE). Copyright (c) 2021 Diadal Nig\n","readmeFilename":"README.md"}