Vue QR Code Component

2.1.1 · maintenance · verified Sun Apr 19

vue-qrcode-component is a straightforward Vue.js component designed for embedding QR code generation directly within Vue applications. It provides a simple API for encoding text into QR codes, with options to customize size, foreground color, background color, and error correction level. The current stable version is 2.1.1. Given its last commit was several years ago (around 2020), it appears to be in a maintenance state, suitable for projects requiring basic QR code functionality without extensive configuration or advanced features. Its key differentiator is its minimal setup and direct integration into Vue 2 projects, offering a ready-to-use solution for adding QR codes with common customizations, rather than relying on a separate QR library and manually integrating it into a Vue wrapper. It does not actively support Vue 3.

Common errors

```
[Vue warn]: Unknown custom element: <qr-code> - did you register the component correctly?
```
cause The `<qr-code>` component was used in a template but was not registered globally using `Vue.component` or locally within the parent component's `components` option.

fix Ensure you have either globally registered the component using `Vue.component('qr-code', VueQRCodeComponent)` (typically in your `main.js`) or locally registered it within the parent component's `components` option where it's being used.
```
TypeError: Cannot read properties of undefined (reading 'component')
```
cause This error typically occurs when `Vue.component` is called without `Vue` being properly imported or initialized, or when attempting to use Vue 2 global APIs in a Vue 3 context without a compatibility layer.

fix Verify that `import Vue from 'vue'` is present and correctly configured for a Vue 2 environment. If you are in a Vue 3 project, this component is not directly compatible; consider a Vue 3-native alternative.
```
Module not found: Error: Can't resolve 'vue-qrcode-component' in '...'
```
cause The `vue-qrcode-component` package was not installed or there is a typo in the import path.

fix Run `npm install vue-qrcode-component` or `yarn add vue-qrcode-component` in your project directory and double-check the import statement for any typos.

Warnings

breaking This component is designed exclusively for Vue 2 applications. It leverages the Vue 2 global API (`Vue.component`) for registration and is not directly compatible with Vue 3's composition API or application instance methods without significant refactoring or a compatibility layer.
Fix: For Vue 3 projects, consider using a different, Vue 3-native QR code library or a core QR generation library manually integrated into a Vue 3 component.
gotcha The package has not received updates for several years (last commit around 2020), indicating it is in a maintenance or abandoned state. This implies that potential security vulnerabilities, critical bug fixes, or new feature requests may not be addressed.
Fix: Evaluate the project's security and maintenance requirements carefully. For critical applications, consider forking the repository, contributing fixes, or opting for a more actively maintained library.
gotcha The `vue-qrcode-component` package exports its main component as a default export. Attempting to use named imports (e.g., `import { VueQRCodeComponent } from 'vue-qrcode-component'`) will result in an undefined module or an error during compilation.
Fix: Always use a default import: `import VueQRCodeComponent from 'vue-qrcode-component';`

Install

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

Imports

VueQRCodeComponent
wrong:
```
import { VueQRCodeComponent } from 'vue-qrcode-component'
```
correct:
```
import VueQRCodeComponent from 'vue-qrcode-component'
```
The component is exported as a default export. Named imports (e.g., destructuring) will result in `undefined`.

Global Registration

wrong:

import { createApp } from 'vue';
const app = createApp({});
app.component('qr-code', VueQRCodeComponent);

correct:

import Vue from 'vue';
import VueQRCodeComponent from 'vue-qrcode-component';
Vue.component('qr-code', VueQRCodeComponent);

This global registration pattern is specific to Vue 2. Attempting to use Vue 3's `app.component` directly will likely not work due to API differences.

Local Component Registration
wrong:
```
export default {
  components: {
    VueQRCodeComponent
  },
  // ...
};
```
correct:
```
import VueQRCodeComponent from 'vue-qrcode-component';

export default {
  components: {
    'qr-code': VueQRCodeComponent,
  },
  // ...
};
```
When locally registering, specify the desired HTML tag name (e.g., 'qr-code') as the key and the imported component as the value in the `components` option. Using the variable name directly as a key only works if the variable name matches the desired tag name (which is generally discouraged).

Quickstart

Demonstrates how to install, globally register the `qr-code` component within a Vue 2 application's entry point, and then use it in a template to display a URL, customizing its size, foreground/background colors, and error correction level.

import Vue from 'vue';
import VueQRCodeComponent from 'vue-qrcode-component';

// Register the component globally for use across your Vue 2 application
Vue.component('qr-code', VueQRCodeComponent);

// Create a new Vue instance to demonstrate the component in action
new Vue({
  el: '#app',
  template: `
    <div id="app">
      <h1>QR Code Example</h1>
      <p>Scan the code below:</p>
      <qr-code 
        text="https://checklist.day" 
        size="280" 
        color="#2c3e50" 
        bg-color="#ecf0f1" 
        error-level="M">
      </qr-code>
      <p>Customized QR code with specific colors and medium error correction.</p>
    </div>
  `
});

view raw JSON →