vue-qr

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

Events

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