Qrcode Component For Vue.js

Install & Download:

# Yarn
$ yarn add @chenfengyuan/vue-qrcode vue
# NPM
$ npm i @chenfengyuan/vue-qrcode vue --save

Description:

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
Tags:

Add Comment