qrcode.vue

⚠️ Now when you are using Vue 3.x, please upgrade qrcode.vue to 3.x

🔒 if you are using Vue 2.x, please keep using version 1.x;

A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3.

中文 | 日本語

install

the qrcode.vue component can use in you Vue.js app.

``bash
npm install --save qrcode.vue # yarn add qrcode.vue
`

`
dist/
|--- qrcode.vue.cjs.js // CommonJS
|--- qrcode.vue.esm.js // ES module
|--- qrcode.vue.browser.js // UMD for browser or require.js or CommonJS
|--- qrcode.vue.browser.min.js // UMD Minimum size
`

Usage

e.g.

`javascript
import { createApp } from 'vue'
import QrcodeVue from 'qrcode.vue'

createApp({
data: {
value: 'https://example.com',
},
template: '',
components: {
QrcodeVue,
},
}).mount('#root')
`

Or single-file components with a *.vue extension:

`html


`

When you use the component with Vue 3 with TypeScript:

`html


`

Component props

$3

- Type: string
- Default: ''

The value content of qrcode.

$3

- Type: number
- Default: 100

The size of qrcode element.

$3

- Type: RenderAs('canvas' | 'svg')
- Default: canvas

Generate QRcode as canvas or svg. The prop svg can work on SSR.

$3

- Type: number
- Default: 0

Define how much wide the quiet zone should be.

$3

- Type: Level('L' | 'M' | 'Q' | 'H')
- Default: L

qrcode Error correction level (one of 'L', 'M', 'Q', 'H'). Know more, wikipedia: QR_code.

$3

- Type: string
- Default: #ffffff

The background color of qrcode.

$3

- Type: string
- Default: #000000

The foreground color of qrcode.

$3

- Type: ImageSettings
- Default: {}

`ts
export type ImageSettings = {
src: string, // The URL of image.
x?: number, // The horizontal offset. When not specified, will center the image.
y?: number, // The vertical offset. When not specified, will center the image.
height: number, // The height of image
width: number, // The height of image
excavate?: boolean, // Whether or not to "excavate" the modules around the image.
borderRadius?: number, // The border radius of image.
}
`

The settings to support qrcode image logo.

$3

- Type: boolean
- Default: false

Enable gradient fill for the QR code.

$3

- Type: GradientType('linear' | 'radial')
- Default: linear

Specify the type of gradient.

$3

- Type: string
- Default: #000000

The start color of the gradient.

$3

- Type: string
- Default: #ffffff

The end color of the gradient.

$3

- Type: string
- Default: ''

The class name of qrcode element.

QrcodeVue 3.5+

QrcodeVue 3.5+ exports separate QrcodeCanvas and QrcodeSvg components, for which the rollup configuration has been modified:

`
// rollup.config.js

- exports: 'default',
+ exports: 'named',
`

Direct references to QrcodeVue in common.js and cdn now require the default field:

`js
const QrcodeVue = require('qrcode.vue').default
const { default: QrcodeVue, QrcodeCanvas, QrcodeSvg } = require('qrcode.vue')
`

`html




``

License

copyright © 2021 @scopewu, license by MIT