qrcode-vue

1.2.0 · abandoned · verified Sun Apr 19

This `qrcode-vue` package offers a Vue.js component for rendering QR codes directly within Vue applications. It utilizes the underlying `qr.js` library for all core QR code encoding functionalities, simplifying integration for Vue 2 developers. Key features include dynamic adjustment of QR code size, customization of background and foreground colors, and the ability to embed a logo image at the center of the generated QR code. While the latest version available on npm is 1.2.0, reportedly published approximately a year ago, the linked GitHub repository (l-ll/qrcode-vue) shows a severe lack of recent development, with the last commits and official releases (like v1.0.0) dating back to 2017. This strong indication of abandonment means the package is not actively maintained and lacks crucial updates or support for modern Vue ecosystems, particularly Vue 3, with which it is not inherently compatible without significant refactoring. Its release cadence is effectively non-existent, making it a risky choice for new projects.

Common errors

```
[Vue warn]: Unknown custom element: <qrcode-vue> - did you register the component correctly?
```
cause The `qrcode-vue` component was imported but not registered either locally in a component or globally in the Vue instance.

fix Ensure `QrcodeVue` is listed in the `components` option of your Vue component: `components: { QrcodeVue }` or globally registered via `Vue.component('qrcode-vue', QrcodeVue)`.
```
Error: Tainted canvases may not be exported. Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement'
```
cause Attempting to generate a QR code with a logo URL from a different origin without proper CORS headers.

fix Host the logo image on the same domain as your application, ensure the image server sends `Access-Control-Allow-Origin` headers, or convert the logo image to a base64 data URL.
```
TypeError: Cannot read properties of undefined (reading 'value')
```
cause The `value` prop, which is mandatory for QR code generation, was not provided or was `undefined`.

fix Always provide a valid string for the `:value` prop, e.g., `:value="myUrl"`.

Warnings

breaking This package is built for Vue 2.x and is not directly compatible with Vue 3.x applications. Attempting to use it in a Vue 3 project will result in runtime errors due to fundamental API changes.
Fix: Consider using alternative QR code libraries designed for Vue 3, or manually adapt the component for Vue 3's composition API and new rendering concepts, which requires significant effort.
gotcha The primary GitHub repository (l-ll/qrcode-vue) has been inactive since 2017, and while npm shows a version 1.2.0 published roughly a year ago, the project is effectively abandoned. This means no new features, bug fixes, or security patches are expected.
Fix: For new projects, prefer actively maintained QR code libraries. If already in use, be aware of potential vulnerabilities and lack of support.
gotcha Embedding a logo via the `logo` prop can lead to Cross-Origin Resource Sharing (CORS) errors if the logo image is hosted on a different domain than your application and does not provide appropriate CORS headers.
Fix: Ensure the logo image is served from the same origin as your application, or configure the image server with appropriate CORS headers (e.g., `Access-Control-Allow-Origin: *`). Alternatively, host the logo image as a base64 data URL.
gotcha The underlying `qr.js` library, on which `qrcode-vue` depends, might not receive timely security updates. Using an unmaintained QR code generator could pose security risks, especially if generating QR codes from untrusted input.
Fix: Regularly audit dependencies for known vulnerabilities. If handling sensitive data, consider more actively maintained alternatives that adhere to modern security practices.

Install

npm install qrcode-vue npm
yarn add qrcode-vue yarn
pnpm add qrcode-vue pnpm

Imports

QrcodeVue

wrong:

import { QrcodeVue } from 'qrcode-vue';

correct:

import QrcodeVue from 'qrcode-vue'; // In a Vue component's script section

The component is exported as the default export of the module.

QrcodeVue

wrong:

import { QrcodeVue } from 'qrcode-vue';
Vue.component('qrcode-vue', QrcodeVue);

correct:

import QrcodeVue from 'qrcode-vue';
Vue.component('qrcode-vue', QrcodeVue); // For global registration in main.js

When globally registering, ensure you import the default export.

QrcodeVue

wrong:

const QrcodeVue = require('qrcode-vue'); // Will return an object { default: Component }

correct:

const QrcodeVue = require('qrcode-vue').default;

In CommonJS environments, the default export is accessed via the `.default` property.

Quickstart

Demonstrates basic integration of `qrcode-vue` into a Vue 2 application, showing prop binding for value, size, colors, and logo, along with dynamic updates.

<template>
  <div id="app">
    <p>Scan this QR code!</p>
    <qrcode-vue 
      :size="size" 
      :value="value" 
      :logo="logo" 
      :bgColor="bgColor" 
      :fgColor="fgColor"
      level="H"
    ></qrcode-vue>
    <p>Current value: {{ value }}</p>
    <p>Size: {{ size }}px</p>
    <p>
      <button @click="changeValue">Change Value</button>
      <button @click="changeSize">Toggle Size</button>
    </p>
  </div>
</template>

<script>
  import QrcodeVue from 'qrcode-vue';

  export default {
    components: {
      QrcodeVue
    },
    data () {
      return {
        size: 160,
        bgColor: '#ffffff',
        fgColor: '#000000',
        value: 'https://checklist.day/quickstart-example',
        logo: 'https://vuejs.org/images/logo.png' // Using Vue logo for example
      }
    },
    methods: {
      changeValue() {
        this.value = this.value === 'https://checklist.day/quickstart-example'
          ? 'https://github.com/l-ll/qrcode-vue'
          : 'https://checklist.day/quickstart-example';
      },
      changeSize() {
        this.size = this.size === 160 ? 200 : 160;
      }
    }
  }
</script>

view raw JSON →