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
For those using vue-cli you will need to add this option into your vue.config.js file to enable runtime compilation
module.exports = { runtimeCompiler: true }For those using webpack you will need to set this option in your webpack.config.js file to enable esm bundling.
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
},
},🔒 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.vueUsage
e.g.
import Vue from 'vue'
import QrcodeVue from 'qrcode.vue'
new Vue({
el: '#root',
data: {
value: 'https://example.com',
},
template: '<qrcode-vue :value="value"></qrcode-vue>',
components: {
QrcodeVue,
},
})Or single-file components with a *.vue extension:
<template>
<div>
<qrcode-vue :value="value" :size="size" level="H"></qrcode-vue>
</div>
</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
level
- Type:
string - Default:
L
qrcode Error correction level (one of 'L', 'M', 'Q', 'H'). Know more, wikipedia: QR_code
size
- Type:
number - Default:
100
The size of qrcode element.
margin
- Type:
number - Default:
0
Define how much wide the quiet zone should be.
renderAs
- Type:
string - Default:
canvas
Generate QRcode as canvas or svg.
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 © 2017 @scopewu, license by MIT