{"id":12553,"library":"vue-qrcode","title":"Vue QR Code Component","description":"vue-qrcode is a Vue.js component designed for generating QR codes directly within Vue applications. It serves as a declarative wrapper around the popular `qrcode` library (github.com/soldair/node-qrcode), abstracting away the complexities of direct canvas or SVG manipulation. The package is currently at version 2.2.2 and maintains an active development cycle, with recent patch and minor releases addressing fixes and new features. It differentiates itself by offering a Vue-idiomatic interface to robust QR code generation, supporting a wide array of customization options including version, error correction level, quiet zone margin, scaling, exact width, and customizable dark and light module colors. It's compatible with both Vue 2.7+ and Vue 3.0+ environments, making it suitable for modern Vue projects.","status":"active","version":"2.2.2","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/rx-ts/vue","tags":["javascript","vue-qrcode","qrcode","vue","typescript"],"install":[{"cmd":"npm install vue-qrcode","lang":"bash","label":"npm"},{"cmd":"yarn add vue-qrcode","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-qrcode","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for the Vue component, supporting Vue 2.7.0+ and 3.0.0+.","package":"vue","optional":false},{"reason":"Core library used internally for all QR code generation logic.","package":"qrcode","optional":false}],"imports":[{"note":"The primary component is exported as a default export, not a named export.","wrong":"import { VueQrcode } from 'vue-qrcode'","symbol":"VueQrcode","correct":"import VueQrcode from 'vue-qrcode'"},{"note":"While recent versions (>=2.2.1) added ESM entries, consistent usage with modern Vue projects typically favors ESM imports. Direct CommonJS `require` might work in some bundler configurations but is less idiomatic and potentially less tree-shakeable.","wrong":"const VueQrcode = require('vue-qrcode')","symbol":"VueQrcode","correct":"import VueQrcode from 'vue-qrcode'"},{"note":"A TypeScript type export available since v2.2.2 for advanced usage, allowing explicit typing of QR code segment data.","symbol":"QRCodeSegment","correct":"import type { QRCodeSegment } from 'vue-qrcode'"}],"quickstart":{"code":"<template>\n  <vue-qrcode\n    value=\"https://www.1stg.me\"\n    :options=\"{ errorCorrectionLevel: 'H' }\"\n    @change=\"onDataUrlChange\"\n  />\n</template>\n<script>\nimport VueQrcode from 'vue-qrcode'\n\nexport default {\n  data() {\n    return {\n      dataUrl: null,\n      qrValue: 'https://www.example.com/qr-data'\n    }\n  },\n  components: {\n    VueQrcode,\n  },\n  methods: {\n    onDataUrlChange(dataUrl) {\n      console.log('Generated Data URL:', dataUrl)\n      this.dataUrl = dataUrl\n    },\n    updateQrValue() {\n      this.qrValue = `https://new-data.com/${Date.now()}`\n    }\n  },\n  mounted() {\n    // Simulate updating QR code value after some time\n    setTimeout(this.updateQrValue, 5000)\n  }\n}\n</script>","lang":"javascript","description":"This quickstart demonstrates how to integrate the VueQrcode component into a Vue SFC, bind a value, pass options, and capture the generated data URL via the `change` event."},"warnings":[{"fix":"Upgrade your Vue project to Vue 2.7.0+ or Vue 3.0.0+. Alternatively, use `vue-qrcode` version 1.x if stuck on older Vue versions.","message":"Version 2.0.0 of `vue-qrcode` introduced a breaking change by raising the minimum required Vue version to 2.7.0 or 3.0.0+. Projects using older Vue versions will need to upgrade Vue or remain on `vue-qrcode` v1.x.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"If upgrading from `vue-qrcode` versions older than 2.1.0, review the `qrcode` library's changelog for any breaking changes or behavior modifications that might impact your QR code generation.","message":"Starting from version 2.1.0, `vue-qrcode` upgraded its internal `qrcode` dependency to v1.5.0+. This update might introduce subtle rendering changes or expose new features/deprecations from the underlying `qrcode` library that could affect existing implementations.","severity":"breaking","affected_versions":">=2.1.0"},{"fix":"Ensure both `vue` (matching the peer dependency range) and `qrcode` (`^1.0.0`) are explicitly installed in your project's `dependencies` or `devDependencies` using `npm install vue qrcode` or `yarn add vue qrcode`.","message":"The `qrcode` library is a mandatory peer dependency. If it is not installed in your project, or an incompatible version is present, `vue-qrcode` will likely fail at runtime or during the build process with errors related to missing `qrcode` modules.","severity":"gotcha","affected_versions":"*"},{"fix":"Verify that your bundler (e.g., Webpack, Rollup, Vite) is configured to correctly process ESM imports. For Node.js environments, consider setting `\"type\": \"module\"` in your `package.json` for files using ESM syntax.","message":"As of `vue-qrcode` v2.2.1, ESM entries were added to the `package.json`. While this generally improves compatibility with modern bundlers and environments (like Vite), ensure your project's build configuration correctly handles ESM imports. In some older or mixed CJS/ESM setups, this could lead to module resolution issues.","severity":"gotcha","affected_versions":">=2.2.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `VueQrcode` is imported and added to the `components` option of your Vue component, e.g., `components: { VueQrcode }`. For global registration in Vue 3, use `app.component('VueQrcode', VueQrcode)`.","cause":"The `VueQrcode` component was used in a template but was not properly registered with Vue, either locally within the parent component or globally.","error":"[Vue warn]: Unknown custom element: <vue-qrcode> - did you register the component correctly?"},{"fix":"Install the required `qrcode` package: `npm install qrcode` or `yarn add qrcode`. Verify its version meets the `vue-qrcode` peer dependency requirement.","cause":"The `qrcode` peer dependency, which `vue-qrcode` relies on for core functionality, is either not installed or an incompatible version is present in your project.","error":"TypeError: Cannot read properties of undefined (reading 'create') (or similar error originating from 'qrcode' module)"},{"fix":"Always provide the `value` prop to the `<vue-qrcode>` component, as it defines the data to be encoded. Example: `<vue-qrcode :value=\"myQrCodeData\" />`.","cause":"When using TypeScript, the `value` prop for the `VueQrcode` component is mandatory and was not provided in the template.","error":"Property 'value' is missing in type '{ ... }' but required in type 'VueQrcodeProps'. (TypeScript error)"},{"fix":"Ensure your bundler is configured to handle ESM modules. If in Node.js, confirm your project's `package.json` has `\"type\": \"module\"` if you are using ESM syntax, or consider dynamic `import()` for CJS contexts.","cause":"Your build setup or Node.js environment is attempting to load `vue-qrcode` as a CommonJS module, but it's primarily designed for ESM, especially in newer versions.","error":"Module not found: Error: Can't resolve 'vue-qrcode' (or 'require() of ES Module ... is not supported')"}],"ecosystem":"npm"}