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.

1npm 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.

1import { createApp } from 'vue'
2import QrcodeVue from 'qrcode.vue'
3
4createApp({
5  data: {
6    value: 'https://example.com',
7  },
8  template: '<qrcode-vue :value="value"></qrcode-vue>',
9  components: {
10    QrcodeVue,
11  },
12}).mount('#root')

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

1<template>
2  <qrcode-vue :value="value" :size="size" level="H" render-as="svg" />
3  <qrcode-canvas :value="QRCODE.VUE 😄" :size="size" level="H" />
4  <qrcode-svg value="QRCODE.VUE 😄" level="H" />
5</template>
6<script>
7  import QrcodeVue, { QrcodeCanvas, QrcodeSvg } from 'qrcode.vue'
8
9  export default {
10    data() {
11      return {
12        value: 'https://example.com',
13        size: 300,
14      }
15    },
16    components: {
17      QrcodeVue,
18      QrcodeCanvas,
19      QrcodeSvg,
20    },
21  }
22</script>

When you use the component with Vue 3 with TypeScript:

1<template>
2  <qrcode-vue
3    :value="value"
4    :level="level"
5    :render-as="renderAs"
6    :background="background"
7    :foreground='foreground'
8    :gradient="gradient"
9    :gradient-type="gradientType"
10    :gradient-start-color="gradientStartColor"
11    :gradient-end-color="gradientEndColor"
12    :image-settings='imageSettings'
13  />
14</template>
15<script setup lang="ts">
16  import { ref } from 'vue'
17  import QrcodeVue from 'qrcode.vue'
18  import type { Level, RenderAs, GradientType, ImageSettings } from 'qrcode.vue'
19
20  const value = ref('qrcode')
21  const level = ref<Level>('M')
22  const renderAs = ref<RenderAs>('svg')
23  const background = ref('#ffffff')
24  const foreground = ref('#000000')
25  const margin = ref(0)
26  
27  const imageSettings = ref<ImageSettings>({
28    src: 'https://github.com/scopewu.png',
29    width: 30,
30    height: 30,
31    // x: 10,
32    // y: 10,
33    excavate: true,
34  })
35
36  const gradient = ref(false)
37  const gradientType = ref<GradientType>('linear')
38  const gradientStartColor = ref('#000000')
39  const gradientEndColor = ref('#38bdf8')
40</script>

Component props

value

• Type: string
• Default: ''

The value content of qrcode.

size

• Type: number
• Default: 100

The size of qrcode element.

render-as

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

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

margin

• Type: number
• Default: 0

Define how much wide the quiet zone should be.

level

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

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

background

• Type: string
• Default: #ffffff

The background color of qrcode.

foreground

• Type: string
• Default: #000000

The foreground color of qrcode.

image-settings

• Type: ImageSettings

• Default: {}

  1export type ImageSettings = {
  2  src: string, // The URL of image.
  3  x?: number,  // The horizontal offset. When not specified, will center the image.
  4  y?: number,  // The vertical offset. When not specified, will center the image.
  5  height: number, // The height of image
  6  width: number,  // The height of image
  7  excavate?: boolean, // Whether or not to "excavate" the modules around the image.
  8}

The settings to support qrcode image logo.

gradient

• Type: boolean
• Default: false

Enable gradient fill for the QR code.

gradient-type

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

Specify the type of gradient.

gradient-start-color

• Type: string
• Default: #000000

The start color of the gradient.

gradient-end-color

• Type: string
• Default: #ffffff

The end color of the gradient.

class

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

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

1<!--With HTML-->
2<div id="root">
3  <p class="flex space-x">
4  <qrcode-vue :value="test" render-as="svg"></qrcode-vue>
5  <qrcode-canvas :value="test"></qrcode-canvas>
6  </p>
7  <p><input v-model="test" /></p>
8</div>
9<script src="https://cdn.jsdelivr.net/npm/vue@3.5/dist/vue.global.prod.js"></script>
10<script src="https://cdn.jsdelivr.net/npm/qrcode.vue@3.5/dist/qrcode.vue.browser.min.js"></script>
11
12<script>
13Vue.createApp({
14  data() { return {
15    test: 'Hello World',
16  }},
17  components: {
18    QrcodeVue: QrcodeVue.default,
19    QrcodeCanvas: QrcodeVue.QrcodeCanvas,
20  },
21}).mount('#root')
22</script>

License

copyright © 2021 @scopewu, license by MIT