{"id":13836,"library":"qrcode.vue","title":"qrcode.vue Vue Component","description":"qrcode.vue is a versatile Vue.js component designed for generating QR codes, supporting both Vue 2 (via its 1.x branch) and Vue 3 (via its 3.x branch). The current stable version is 3.8.1, with the package exhibiting an active release cadence, frequently pushing updates for performance enhancements, new features, and bug fixes. Key differentiators include the ability to render QR codes as either `canvas` or `svg`, comprehensive support for embedding logo images with customizable positions, sizes, border radii, and background excavation, as well as recent additions like gradient fill functionality. This flexibility makes it suitable for a wide array of web applications requiring dynamic QR code generation, providing a robust solution for integrating QR code capabilities directly into Vue applications.","status":"active","version":"3.8.1","language":"javascript","source_language":"en","source_url":"https://github.com/scopewu/qrcode.vue","tags":["javascript","vue","vue qrcode","component","code","qrcode","QR code","二维码","typescript"],"install":[{"cmd":"npm install qrcode.vue","lang":"bash","label":"npm"},{"cmd":"yarn add qrcode.vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add qrcode.vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for the Vue component to function. Version 1.x supports Vue 2, while version 3.x supports Vue 3.","package":"vue","optional":false}],"imports":[{"note":"QrcodeVue is the default export for the primary component. For Vue 3, ensure you are using qrcode.vue v3.x. CommonJS require() syntax is not supported in modern Vue 3 projects.","wrong":"const QrcodeVue = require('qrcode.vue')","symbol":"QrcodeVue","correct":"import QrcodeVue from 'qrcode.vue'"},{"note":"QrcodeCanvas and QrcodeSvg are named exports allowing direct rendering to canvas or SVG elements, respectively. They are not default exports.","wrong":"import QrcodeCanvas from 'qrcode.vue'","symbol":"{ QrcodeCanvas, QrcodeSvg }","correct":"import { QrcodeCanvas, QrcodeSvg } from 'qrcode.vue'"},{"note":"When importing types in TypeScript, use 'import type' to ensure they are stripped from the compiled JavaScript, preventing runtime errors or unnecessary bundle size increases. These types define valid prop values.","wrong":"import { Level, RenderAs } from 'qrcode.vue'","symbol":"Types (Level, RenderAs, ImageSettings)","correct":"import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'"}],"quickstart":{"code":"import { ref } from 'vue'\nimport QrcodeVue from 'qrcode.vue'\nimport type { Level, RenderAs, GradientType, ImageSettings } from 'qrcode.vue'\n\n// This code snippet demonstrates how to set up reactive data and import necessary\n// components and types for qrcode.vue within a Vue 3 Composition API setup.\n// In a real Vue component, these refs would be used in the <template> section.\n\nconst value = ref('https://checklist.day/qrcode-example')\nconst level = ref<Level>('H') // High error correction level\nconst renderAs = ref<RenderAs>('svg') // Render as SVG for scalability\nconst constbackground = ref('#ffffff')\nconst foreground = ref('#000000')\nconst margin = ref(4)\n\nconst imageSettings = ref<ImageSettings>({\n  src: 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/solid/qrcode.svg', // Example logo\n  width: 40,\n  height: 40,\n  excavate: true, // Excavate QR code behind the image for clarity\n  borderRadius: 8 // Apply border radius to the logo\n})\n\nconst gradient = ref(true)\nconst gradientType = ref<GradientType>('linear')\nconst gradientStartColor = ref('#10b981') // Emerald green\nconst gradientEndColor = ref('#3b82f6')   // Blue\n\n// Usage in a Vue template (example):\n// <template>\n//   <qrcode-vue\n//     :value=\"value\"\n//     :level=\"level\"\n//     :render-as=\"renderAs\"\n//     :background=\"background\"\n//     :foreground='foreground'\n//     :margin=\"margin\"\n//     :gradient=\"gradient\"\n//     :gradient-type=\"gradientType\"\n//     :gradient-start-color=\"gradientStartColor\"\n//     :gradient-end-color=\"gradientEndColor\"\n//     :image-settings='imageSettings'\n//   />\n// </template>\n","lang":"typescript","description":"This quickstart demonstrates how to use qrcode.vue with Vue 3's Composition API, configuring common props like value, error correction level, rendering type (SVG), colors, margins, image settings for a logo, and gradient fills."},"warnings":[{"fix":"Ensure `qrcode.vue` version matches your Vue.js project's major version. For Vue 3 projects, install `qrcode.vue@^3.0.0`. For Vue 2 projects, stick to `qrcode.vue@^1.0.0`.","message":"Major version incompatibility between Vue 2 and Vue 3. qrcode.vue v1.x is for Vue 2, while v3.x is for Vue 3. Using the wrong version will lead to runtime errors.","severity":"breaking","affected_versions":">=1.0.0, <3.0.0 (for Vue 2) | >=3.0.0 (for Vue 3)"},{"fix":"Test your QR code outputs thoroughly after upgrading to v3.4.0 or newer to ensure no regressions or unexpected visual changes, especially in complex use cases.","message":"In v3.4.0, the underlying QR code generation library was switched from `qr.js` to `nayuki/QR-Code-generator` for performance improvements. While largely compatible, this change might introduce subtle differences in QR code rendering or edge case behavior compared to previous versions.","severity":"breaking","affected_versions":">=3.4.0"},{"fix":"Upgrade to `qrcode.vue` v3.8.1 or newer to benefit from the fix that ensures unique SVG IDs for multi-instance renderings. If unable to upgrade, consider rendering to `canvas` or manually managing component keys.","message":"Prior to v3.8.1, when rendering multiple QR codes using `render-as=\"svg\"` on the same page, there was a potential for conflicting SVG element IDs, which could cause accessibility issues or incorrect rendering behavior.","severity":"gotcha","affected_versions":">=3.0.0 <3.8.1"},{"fix":"Always bind `margin` as a number using `:margin=\"0\"` (or a variable holding a number) to ensure correct type handling and avoid potential coercion issues.","message":"The `margin` prop, while internally optimized in v3.5.1 to handle string numeric values (e.g., `margin=\"0\"`), is ideally expected as a `number`. Providing non-numeric strings might lead to unexpected behavior.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"search_vec":"'1':21 '2':18 '3':26,29 '3.8.1':37 'abil':61 'activ':43 'addit':90 'applic':106,124 'array':103 'background':84 'border':81 'branch':23,31 'bug':55 'cadenc':45 'canva':68 'capabl':120 'code':14,65,110,119,130,133 'compon':3,9,129 'comprehens':71 'current':33 'customiz':78 'design':10 'differenti':58 'direct':121 'dynam':108 'either':67 'embed':74 'enhanc':51 'excav':85 'exhibit':41 'featur':53 'fill':93 'fix':56 'flexibl':96 'frequent':46 'function':94 'generat':12,111 'gradient':92 'imag':76 'includ':59 'integr':117 'javascript':125 'key':57 'like':91 'logo':75 'make':97 'new':52 'packag':40 'perform':50 'posit':79 'provid':112 'push':47 'qr':13,64,109,118,132 'qrcode':128,131 'qrcode.vue':1,4 'radii':82 'recent':89 'releas':44 'render':63 'requir':107 'robust':114 'size':80 'solut':115 'stabl':34 'suitabl':99 'support':15,72 'svg':70 'typescript':135 'updat':48 'versatil':7 'version':35 'via':19,27 'vue':2,17,25,123,126,127 'vue.js':8 'web':105 'well':87 'wide':102 'x':22,30 '二维码':134","created_at":"2026-04-20T01:56:33.949094+00:00","updated_at":"2026-04-20T01:56:33.949094+00:00","problems":[{"fix":"Verify that your `qrcode.vue` version matches your Vue.js project's major version. For Vue 3, ensure `qrcode.vue` v3.x is installed. Also, double-check the import statement: `import QrcodeVue from 'qrcode.vue'`.","cause":"Attempting to use `qrcode.vue` v1.x (for Vue 2) in a Vue 3 project, or vice-versa, or incorrect import path.","error":"[Vue warn]: Component provided is not a function or object. Did you forget to import the component from the file?"},{"fix":"QrcodeVue is a Vue component, not a class to be instantiated with `new`. Use it directly in your Vue component's `components` option or template: `import QrcodeVue from 'qrcode.vue'; components: { QrcodeVue }`.","cause":"Attempting to instantiate `QrcodeVue` using `new QrcodeVue()` with an ES module import, or incorrect default import usage.","error":"TypeError: qrcode_vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor"},{"fix":"When importing types, use the `import type` syntax: `import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'`.","cause":"Attempting to import `ImageSettings` or other types as a regular named import instead of a type import in TypeScript.","error":"Property 'ImageSettings' does not exist on type 'typeof import(\"qrcode.vue\")'. Did you mean 'imageSettings'?"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://qr-vue.tie.pub","github":"https://github.com/scopewu/qrcode.vue","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/qrcode.vue","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}