Appearance
VueQrcode
🤳 A Vue component for QR code generation with qrcode
TOC
Demo
data:image/png;base64,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
Usage
vue
<template>
<vue-qrcode value="https://www.1stg.me" />
</template>
<script>
import VueQrcode from 'vue-qrcode'
export default {
components: {
VueQrcode,
},
}
</script>
Available Props
prop | type (range) | default value |
---|---|---|
version | number (1-40) | N/A |
errorCorrectionLevel | String ('low', 'medium', 'quartile', 'high', 'L', 'M', 'Q', 'H') | 'M' |
maskPattern | number (0-7) | N/A |
toSJISFunc | Function | N/A |
margin | number | 4 |
scale | number | 4 |
width | number | N/A |
color | { dark: string; light:string } | { dark: '#000000ff', light: '#ffffffff' } |
type | string ('image/png', 'image/jpeg', 'image/webp') | 'image/png' |
quality | number (0-1) | 0.92 |
value | string |Array<{ data: string; mode?: string }> | N/A |
Available Events
event | type |
---|---|
change | dataUrl: string |
Sponsors
1stG | RxTS | UnTS |
---|---|---|
Backers
1stG | RxTS | UnTS |
---|---|---|
Changelog
Detailed changes for each release are documented in CHANGELOG.md.