Package Exports
- qrcode.vue
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (qrcode.vue) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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.
install
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 sizeUsage
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>Component props
value
- Type:
string - Default:
''
The value content of qrcode.
size
- Type:
number - Default:
100
The size of qrcode element.
render-as
- Type:
string - 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:
string - Default:
H
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.
class
- Type:
string - Default:
''
The class name of qrcode element.
License
copyright © 2021 @scopewu, license by MIT