qrcode-vuejs

QRCode Generator for Vue

QR code implementation based on https://github.com/kazuhikoarase/qrcode-generator

Online Demo

Installation

npm i qrcode-vuejs

Usage

Import

import VQrcode, { ErrorCorrectLevel, RenderOptions } from 'qrcode-vuejs';

Basic

// register component
import { createApp } from 'vue';
import VQrcode from 'qrcode-vue';
import TestView from './TestView.vue';

const app = createApp(TestView);
app.use(VQrcode);
app.mount('#test');

Plugin

// register component
import { createApp } from 'vue';
import VQrcode, { ErrorCorrectLevel, RenderOptions } from 'qrcode-vuejs';
import TestView from './TestView.vue';

const app = createApp(TestView);
app.use(VQrcode, {
    size: 200,
    colorDark: '#000000',
    colorLight: '#ffffff',
    correctLevel: ErrorCorrectLevel.M,
    render: RenderOptions.CANVAS,
});
app.mount('#test');

<script setup lang="ts"></script>
<template>
    <v-qrcode text="https://ishinvin.github.io" />
</template>

Import Component

// Single-File Components
<script setup lang="ts">
import { VQrcode, RenderOptions, ErrorCorrectLevel } from 'qrcode-vuejs';
</script>

<template>
    <v-qrcode
        text="https://ishinvin.github.io"
        :size="200"
        :render="RenderOptions.CANVAS"
        :correct-level="ErrorCorrectLevel.M"
        color-dark="#000000"
        color-light="#ffffff"
    />
</template>

Props

Name	Type	Default	Description
text	string		QR string value to generate
size	number	200	Size of the QR code canvas
render	RenderOptions	CANVAS	Render type (CANVAS, SVG, IMAGE, HTML)
color-dark	string	#000000	Foreground color of the QR
color-light	string	#ffffff	Background color of the QR
correct-level	ErrorCorrectLevel	M	QR Code has error correction capability to restore data if the code is dirty or damaged. (L = Approx 7%, M = Approx 15%, Q = Approx 25%, H = Approx 30%)