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.
the qrcode.vue component can use in you Vue.js app.
npm install --save qrcode.vue # yarn add qrcode.vuedist/
|--- 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
e.g.
import { createApp } from 'vue'
import QrcodeVue from 'qrcode.vue'
createApp({
data: {
value: 'https://example.com',
},
template: '<qrcode-vue :value="value"></qrcode-vue>',
components: {
QrcodeVue,
},
}).mount('#root')Or single-file components with a *.vue extension:
<template>
<qrcode-vue :value="value" :size="size" level="H" />
</template>
<script>
import QrcodeVue from 'qrcode.vue'
export default {
data() {
return {
value: 'https://example.com',
size: 300,
}
},
components: {
QrcodeVue,
},
}
</script>When you use the component with Vue 3 with TypeScript:
<template>
<qrcode-vue :value="value" :level="level" :render-as="renderAs" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import QrcodeVue from 'qrcode.vue'
import type { Level, RenderAs } from 'qrcode.vue'
const value = ref('qrcode')
const level = ref<Level>('M')
const renderAs = ref<RenderAs>('svg')
</script>- Type:
string - Default:
''
The value content of qrcode.
- Type:
number - Default:
100
The size of qrcode element.
- Type:
RenderAs('canvas' | 'svg') - Default:
canvas
Generate QRcode as canvas or svg. The prop svg can work on SSR.
- Type:
number - Default:
0
Define how much wide the quiet zone should be.
- Type:
Level('L' | 'M' | 'Q' | 'H') - Default:
H
qrcode Error correction level (one of 'L', 'M', 'Q', 'H'). Know more, wikipedia: QR_code.
- Type:
string - Default:
#ffffff
The background color of qrcode.
- Type:
string - Default:
#000000
The foreground color of qrcode.
- Type:
string - Default:
''
The class name of qrcode element.
copyright © 2021 @scopewu, license by MIT
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent