vue-qr

The Vue 3 Component for SumiMakito's Awesome-qr.js.

The only one qr code component for Vue.js you need!

Notice

• v5.x 仅支持 Vue 3
• Vue 2 用户请使用 v4.x: npm install vue-qr@4
• 不支持 IE 浏览器

Examples

Try to scan these QR codes below with your smart phone.

Example 1	Example 2	Example 3	Example 4

Demo

npm run dev

Installation

npm install vue-qr --save

Usage

Global Registration

import { createApp } from 'vue'
import { VueQr, install } from 'vue-qr'

const app = createApp(App)
app.use({ install }) // or app.component('VueQr', VueQr)
app.mount('#app')

Local Registration

<script setup>
import VueQr from 'vue-qr'
</script>

<template>
  <vue-qr text="Hello world!" />
  <vue-qr :bgSrc="src" :logoSrc="src2" text="Hello world!" :size="200" />
  <vue-qr text="Hello world!" @generated="onGenerated" qid="testid" />
</template>

Event Handling

<script setup>
function onGenerated(dataUrl, id) {
  console.log(dataUrl, id)
}
</script>

<template>
  <vue-qr text="Hello world!" @generated="onGenerated" qid="testid" />
</template>

Props

Parameter	Type	Default	Explanation
text	String	(required)	Contents to encode
correctLevel	Number	1	Correct Level 0-3
size	Number	200	Width and height of the output QR code, includes margin
margin	Number	20	Margin around the QR code
colorDark	String	'#000000'	Color of data blocks
colorLight	String	'#FFFFFF'	Color of empty space
components	Object	-	Controls appearances of parts. See ComponentOptions
bgSrc	String	-	Background image URL
gifBgSrc	String	-	GIF background URL (overrides bgSrc)
backgroundColor	String	'#FFFFFF'	Background color
backgroundDimming	String	'rgba(0,0,0,0)'	Color mask above background image
logoSrc	String	-	Logo URL at center
logoScale	Number	0.2	Logo size = logoScale * (size - 2 * margin)
logoMargin	Number	0	White margin around logo
logoBackgroundColor	String	'rgba(255,255,255,1)'	Logo background color
logoCornerRadius	Number	8	Logo corner radius
whiteMargin	Boolean	true	White border around background image
dotScale	Number	1	Data dots scale (0 < scale ≤ 1)
autoColor	Boolean	true	Use dominant color of background as colorDark
binarize	Boolean	false	Binarize the image
binarizeThreshold	Number	128	Binarize threshold (0-255)
bindElement	Boolean	true	Auto-binds generated QR to HTML element
qid	String	-	ID for async identification

Events

Event	Parameters	Description
generated	(dataUrl, qid)	Emitted when QR code is generated

ComponentOptions

type ComponentOptions = {
  data?: { scale?: number }
  timing?: { scale?: number; protectors?: boolean }
  alignment?: { scale?: number; protectors?: boolean }
  cornerAlignment?: { scale?: number; protectors?: boolean }
}

Default:

{
  data: { scale: 1 },
  timing: { scale: 1, protectors: false },
  alignment: { scale: 1, protectors: false },
  cornerAlignment: { scale: 1, protectors: true }
}

For more details check out Awesome-qr.js