vue-qr

library5.0.3jsnpmunverified

Vue-qr is a dedicated Vue 3 component for generating highly customizable QR codes, built upon the Awesome-qr.js library. It offers extensive styling options, including background images (static or GIF), logos, adjustable margins, color control for data blocks and empty spaces, and various error correction levels. The package is currently at version 5.0.3, specifically designed for Vue 3 applications. Historically, version 4.x supports Vue 2, indicating a release cadence tied to Vue's major versions. Its key differentiator is the rich set of visual customization options, enabling developers to embed branded or aesthetically pleasing QR codes directly within their Vue applications, moving beyond basic black-and-white patterns.

web-framework serialization

npm install vue-qr

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-QR

vue-qr

web-frameworkjavascriptv5.0.3

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.

VueQr

✓ import VueQr from 'vue-qr'

✗ import { VueQr } from 'vue-qr'

Use this default import for local component registration in Vue 3 setup scripts or options API components. This is the most common usage pattern.

VueQr, install

✓ import { VueQr, install } from 'vue-qr'

✗ import VueQr, { install } from 'vue-qr'

When globally registering the component, `VueQr` and the `install` function are named exports. The `install` function simplifies global registration using `app.use({ install })`.

ComponentOptions

✓ import type { ComponentOptions } from 'vue-qr'

When importing types for component props or options, use `import type` for better tree-shaking and to explicitly denote a type-only import in TypeScript environments.

This quickstart demonstrates local registration and basic usage of the VueQr component within a Vue 3 application. It showcases different configurations, including setting text content, custom sizes, incorporating a logo, applying custom colors, handling the 'generated' event, and utilizing various styling props like background colors and logo corner radius.

import { ref, defineComponent } from 'vue'; import VueQr from 'vue-qr'; export default defineComponent({ components: { VueQr, }, setup() { const qrText = ref('https://checklist.day'); const logoUrl = ref('https://raw.githubusercontent.com/Binaryify/vue-qr/master/src/assets/logo.png'); const onGenerated = (dataUrl: string, id: string) => { console.log('QR code generated:', dataUrl, id); // You can further process dataUrl here, e.g., save it. }; return { qrText, logoUrl, onGenerated, }; }, template: ` <div style="display: flex; gap: 20px; flex-wrap: wrap; padding: 20px; font-family: sans-serif;"> <h2>Vue-QR Examples</h2> <div> <h3>Basic QR Code</h3> <vue-qr :text="qrText" :size="250" :margin="15" /> </div> <div> <h3>QR Code with Logo & Custom Colors</h3> <vue-qr :text="'Scan me for more info!'" :logoSrc="logoUrl" :size="250" :margin="10" :dotScale="0.8" :colorDark="'#4A90E2'" :colorLight="'#E0E0E0'" @generated="onGenerated" qid="custom-qr-1" /> </div> <div> <h3>QR Code with Custom Background & Round Logo</h3> <vue-qr :text="'Another custom QR with high correction!'" :size="250" :correctLevel="3" :backgroundColor="'#F8F8F8'" :backgroundDimming="'rgba(0,0,0,0.1)'" :logoCornerRadius="12" :logoScale="0.25" /> </div> </div> `, });

Debug

Known issues

breakingVersion 5.x and above of `vue-qr` explicitly supports only Vue 3. Applications built with Vue 2 will not be compatible due to changes in Vue's API.

fix

For Vue 2 projects, you must install version 4.x of the package: `npm install vue-qr@4`. For Vue 3 projects, ensure your `vue` peer dependency in `package.json` is satisfied (e.g., `"vue": "^3.3.0"`).

affects: >=5.0.0

gotcha`vue-qr` does not provide support for Internet Explorer (IE) browsers. Usage in IE environments may result in rendering issues or component failure, as it relies on modern browser APIs.

fix

Ensure your project's browser compatibility targets exclude IE, or implement a fallback solution or warning for users accessing the application via IE.

affects: >=1.0.0

gotchaWhen both `bgSrc` (for static background images) and `gifBgSrc` (for GIF animations) props are provided, `gifBgSrc` will take precedence. The static image specified by `bgSrc` will be ignored.

fix

To use a static background, ensure `gifBgSrc` is not provided or is set to `null`. Use only one of these props at a time for the desired background effect.

affects: >=1.0.0

gotchaThe `bindElement` prop, which defaults to `true`, automatically renders the generated QR code directly into the component's HTML element. If you need to retrieve the QR code's `dataUrl` for manual handling (e.g., uploading to a server, using in a different context) without direct DOM injection, you should set `bindElement` to `false`.

fix

If you observe unexpected rendering or require manual control over the generated image data, set `:bindElement="false"` and listen to the `generated` event to access the `dataUrl`.

affects: >=1.0.0

Errors

Common errors & fixes

Failed to resolve component: vue-qr

The `VueQr` component was not correctly imported or registered within your Vue application or a parent component.

fix

Ensure you either `import VueQr from 'vue-qr'` and add it to your component's `components` option, or globally register it using `app.use({ install })` after importing `{ install } from 'vue-qr'` in your main application entry point.

npm ERR! ERESOLVE unable to resolve dependency tree

This error typically occurs when attempting to install `vue-qr` v5.x in a project that is configured for Vue 2, leading to an incompatible peer dependency conflict.

fix

For Vue 2 projects, install the compatible version 4.x specifically: `npm install vue-qr@4`. For Vue 3 projects, ensure your `package.json` specifies a compatible Vue 3 version (e.g., `"vue": "^3.3.0"`).

TypeError: Cannot read properties of undefined (reading 'install') or Cannot destructure property 'install' of 'undefined' as it is undefined.

This usually indicates an incorrect import or usage pattern when attempting to globally register the component, often trying to destructure `install` from a default import or accessing it from an incorrect object.

fix

When globally registering, use `import { install } from 'vue-qr'` and then `app.use({ install })`. Alternatively, you can use `app.component('VueQr', VueQr)` if you have imported `VueQr` as a named export (`import { VueQr } from 'vue-qr'`).

Upgrade

Version history

5.0.3latest on npm

Audit

Dependencies

vuerequiredVue.js 3 is a peer dependency required for component rendering and integration within a Vue application.

Agent activity

14 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/Binaryify/vue-qr ↗

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