Qrcode Component For Vue.js

Yet another QR code generator component bases on node-qrcode.

Basic Usage:

1. Import and register the component.

import Vue from 'vue';
import VueQrcode from '@chenfengyuan/vue-qrcode';
Vue.component(VueQrcode.name, VueQrcode);

2. Add the QRcode component to the template and determine the value in the value prop.

<qrcode value="https://www.vuescript.com/"></qrcode>

3. Customize the QR code using the node-qrcode’s options.

<qrcode value="https://www.vuescript.com/" :options="{ color: { dark: '#0275d8' } }"></qrcode>

4. Determine the tag name of the QR code: ‘canvas’, ‘img’, etc.

<qrcode value="https://www.vuescript.com/" tag="canvas"></qrcode>

Preview:

Qrcode Component For Vue.js

Changelog:

v2.0.0 (02/07/2022)

  • upgrade to Vue 3

Download Details:

Author: fengyuanchen

Live Demo: https://fengyuanchen.github.io/vue-qrcode/

Download Link: https://github.com/fengyuanchen/vue-qrcode/archive/master.zip

Official Website: https://github.com/fengyuanchen/vue-qrcode

Install & Download:

# Yarn
$ yarn add @chenfengyuan/vue-qrcode vue

# NPM
$ npm i @chenfengyuan/vue-qrcode vue --save
Tags:

Add Comment