vue-qrcode

library2.2.2jsnpmunverified

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.

web-framework serialization

npm install vue-qrcode

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-QRCODE

vue-qrcode

web-frameworkjavascriptv2.2.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueQrcode

✓ import VueQrcode from 'vue-qrcode'

✗ import { VueQrcode } from 'vue-qrcode'

The primary component is exported as a default export, not a named export.

VueQrcode

✓ import VueQrcode from 'vue-qrcode'

✗ const VueQrcode = require('vue-qrcode')

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.

QRCodeSegment

✓ import type { QRCodeSegment } from 'vue-qrcode'

A TypeScript type export available since v2.2.2 for advanced usage, allowing explicit typing of QR code segment data.

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.

<template> <vue-qrcode value="https://www.1stg.me" :options="{ errorCorrectionLevel: 'H' }" @change="onDataUrlChange" /> </template> <script> import VueQrcode from 'vue-qrcode' export default { data() { return { dataUrl: null, qrValue: 'https://www.example.com/qr-data' } }, components: { VueQrcode, }, methods: { onDataUrlChange(dataUrl) { console.log('Generated Data URL:', dataUrl) this.dataUrl = dataUrl }, updateQrValue() { this.qrValue = `https://new-data.com/${Date.now()}` } }, mounted() { // Simulate updating QR code value after some time setTimeout(this.updateQrValue, 5000) } } </script>

Debug

Known issues

breakingVersion 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.

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.

affects: >=2.0.0

breakingStarting 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.

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.

affects: >=2.1.0

gotchaThe `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.

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`.

affects: *

gotchaAs 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.

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.

affects: >=2.2.1

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <vue-qrcode> - did you register the component correctly?

The `VueQrcode` component was used in a template but was not properly registered with Vue, either locally within the parent component or globally.

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)`.

TypeError: Cannot read properties of undefined (reading 'create') (or similar error originating from 'qrcode' module)

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.

fix

Install the required `qrcode` package: `npm install qrcode` or `yarn add qrcode`. Verify its version meets the `vue-qrcode` peer dependency requirement.

Property 'value' is missing in type '{ ... }' but required in type 'VueQrcodeProps'. (TypeScript error)

When using TypeScript, the `value` prop for the `VueQrcode` component is mandatory and was not provided in the template.

fix

Always provide the `value` prop to the `<vue-qrcode>` component, as it defines the data to be encoded. Example: `<vue-qrcode :value="myQrCodeData" />`.

Module not found: Error: Can't resolve 'vue-qrcode' (or 'require() of ES Module ... is not supported')

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.

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.

Upgrade

Version history

2.2.2latest on npm

Audit

Dependencies

vuerequiredRuntime peer dependency for the Vue component, supporting Vue 2.7.0+ and 3.0.0+.

qrcoderequiredCore library used internally for all QR code generation logic.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/rx-ts/vue ↗

packagehttps://www.npmjs.com/package/vue-qrcode ↗