Vue QR

To make the VueQr component available throughout your entire Vue 3 application, use the install function during app initialization.

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

const app = createApp(App)
app.use({ install }) // or app.component('VueQr', VueQr)
app.mount('#app')

To use the component only within a specific Vue component, import VueQr directly in your <script setup> block.

<script setup>
import VueQr from 'vue-qr'
</script>

<template>
  <vue-qr text="Hello world!" />
</template>

Install the vue-qr package using npm to use it in your Vue 3 project.

Note:

• v5.x is for Vue 3 only.
• For Vue 2, use npm install vue-qr@4.
• Internet Explorer is not supported.

npm install vue-qr --save

The components prop allows for fine-grained control over the scale and protector settings of different parts of the QR code. This follows the structure of Awesome-qr.js.

Available keys in the components object:

• data: Controls data dots.
• timing: Controls timing patterns.
• alignment: Controls alignment patterns.
• cornerAlignment: Controls corner alignment patterns.

Each key accepts an object with scale (number) and protectors (boolean).

type ComponentOptions = {
  data?: { scale?: number }
  timing?: { scale?: number; protectors?: boolean }
  alignment?: { scale?: number; protectors?: boolean }
  cornerAlignment?: { scale?: number; protectors?: boolean }
}

To use vue-qr globally in your Vue application, use the install function. This registers the VueQr component so it can be used in any template without local registration.

import { install } from 'vue-qr';

// In your main.js or app entry point
const app = createApp(App);
app.use(install);

You can register VueQr globally using the install method. This makes the component available throughout your entire Vue application without needing to import it in every file.

import { createApp } from 'vue';
import VueQr from 'vue-qr';
import App from './App.vue';

const app = createApp(App);

// Global registration
app.use(VueQr);

app.mount('#app');

The generated event is emitted when the QR code has been successfully created. It provides the dataUrl of the generated image and the qid (if provided).

<script setup>
function onGenerated(dataUrl, id) {
  console.log(dataUrl, id)
}
</script>

<template>
  <vue-qr text="Hello world!" @generated="onGenerated" qid="testid" />
</template>

The components prop allows you to adjust the scale of specific QR code elements. Each sub-option can specify a scale and whether protectors should be applied.

Supported keys within ComponentOptions:

• data: Controls the scale of the data modules.
• timing: Controls the scale of the timing patterns.
• alignment: Controls the scale of the alignment patterns.
• cornerAlignment: Controls the scale of the corner alignment patterns.

const componentConfig = {
  data: { scale: 1.2 },
  timing: { scale: 1.0, protectors: true },
  alignment: { scale: 1.1, protectors: true },
  cornerAlignment: { scale: 1.0, protectors: true }
};

// Usage in component
<VueQr text="..." :components="componentConfig" />

The vue-qr component accepts several props to customize the appearance, content, and behavior of the QR code.

Required Props:

• text: The string content to encode in the QR code.

Key Configuration Props:

• size: Width and height of the output (includes margin). Default: 200.
• margin: Margin around the QR code. Default: 20.
• colorDark: Color of data blocks. Default: '#000000'.
• colorLight: Color of empty space. Default: '#FFFFFF'.
• bgSrc: Background image URL.
• gifBgSrc: GIF background URL (overrides bgSrc).
• logoSrc: URL for the logo at the center.
• logoScale: Scale factor for the logo relative to the QR size. Default: 0.2.
• autoColor: If true, uses the dominant color of the background as colorDark. Default: true.
• qid: A unique string ID used for async identification in the generated event.

The VueQr component emits a generated event when the QR code has been successfully rendered. This event provides the resulting data URL, which can be used to display the image elsewhere or download it.

Arguments:

• dataUrl: (string) The base64 encoded data URL of the generated QR code.
• qid: (string, optional) The unique identifier passed to the component.

// Example event handling
<VueQr 
  text="hello" 
  @generated="onGenerated" 
/>

// In your script
const onGenerated = (dataUrl: string, qid?: string) => {
  console.log('QR Code Data URL:', dataUrl);
};

You can import the VueQr component directly for local registration or manual usage within your Vue components.

import { VueQr } from 'vue-qr';

export default {
  components: {
    VueQr
  }
}