What is qrcode.vue?
qrcode.vue is a Vue.js component for generating QR codes. It provides a simple and flexible way to create QR codes in your Vue applications.
What are qrcode.vue's main functionalities?
Basic QR Code Generation
This feature allows you to generate a basic QR code by providing a value (e.g., a URL) to the `qrcode-vue` component.
<template>
<qrcode-vue value="https://example.com" />
</template>
<script>
import QrcodeVue from 'qrcode.vue';
export default {
components: {
QrcodeVue
}
};
</script>
Customizing QR Code Size
You can customize the size of the QR code by setting the `size` prop.
<template>
<qrcode-vue value="https://example.com" :size="200" />
</template>
<script>
import QrcodeVue from 'qrcode.vue';
export default {
components: {
QrcodeVue
}
};
</script>
Customizing QR Code Color
This feature allows you to customize the colors of the QR code by setting the `color` prop with `dark` and `light` values.
<template>
<qrcode-vue value="https://example.com" :color="{ dark: '#000000', light: '#ffffff' }" />
</template>
<script>
import QrcodeVue from 'qrcode.vue';
export default {
components: {
QrcodeVue
}
};
</script>
Other packages similar to qrcode.vue
vue-qrcode-reader
vue-qrcode-reader is a Vue.js component for reading QR codes from camera or file input. Unlike qrcode.vue, which focuses on generating QR codes, vue-qrcode-reader is designed for scanning and reading QR codes.
qrcode.react
qrcode.react is a QR code generator for React applications. It provides similar functionality to qrcode.vue but is designed for use with React instead of Vue.
react-qr-code
react-qr-code is another QR code generator for React applications. It offers similar features to qrcode.vue, such as customizable size and color, but is intended for React developers.
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. Both support Vue 2 and Vue 3.
中文 | 日本語
install
the qrcode.vue
component can use in you Vue.js app.
npm install --save qrcode.vue
dist/
|--- 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
Usage
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" render-as="svg" />
<qrcode-canvas :value="QRCODE.VUE 😄" :size="size" level="H" />
<qrcode-svg value="QRCODE.VUE 😄" level="H" />
</template>
<script>
import QrcodeVue, { QrcodeCanvas, QrcodeSvg } from 'qrcode.vue'
export default {
data() {
return {
value: 'https://example.com',
size: 300,
}
},
components: {
QrcodeVue,
QrcodeCanvas,
QrcodeSvg,
},
}
</script>
When you use the component with Vue 3 with TypeScript
:
<template>
<qrcode-vue
:value="value"
:level="level"
:render-as="renderAs"
:background="background"
:foreground='foreground'
:image-settings='imageSettings'
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import QrcodeVue from 'qrcode.vue'
import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'
const value = ref('qrcode')
const level = ref<Level>('M')
const renderAs = ref<RenderAs>('svg')
const background = ref('#ffffff')
const foreground = ref('#000000')
const margin = ref(0)
const imageSettings = ref<ImageSettings>({
src: 'https://github.com/scopewu.png',
width: 30,
height: 30,
excavate: true,
})
</script>
Component props
value
The value content of qrcode.
size
The size of qrcode element.
render-as
- Type:
RenderAs('canvas' | 'svg')
- Default:
canvas
Generate QRcode as canvas
or svg
. The prop svg
can work on SSR.
margin
Define how much wide the quiet zone should be.
level
- Type:
Level('L' | 'M' | 'Q' | 'H')
- Default:
L
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.
image-settings
-
Type: ImageSettings
-
Default: {}
export type ImageSettings = {
src: string,
x?: number,
y?: number,
height: number,
width: number,
excavate?: boolean,
}
The settings to support qrcode image logo.
class
The class name of qrcode element.
License
copyright © 2021 @scopewu, license by MIT
[3.5.0] - 2024-09-26
Feature
- Support logo image for Qrcode.
- Exports separate
QrcodeCanvas
and QrcodeSvg
components
Direct references to QrcodeVue
in common.js and cdn now require the default
field:
const QrcodeVue = require('qrcode.vue').default
const { default: QrcodeVue, QrcodeCanvas, QrcodeSvg } = require('qrcode.vue')
<!--With HTML-->
<div id="root">
<p class="flex space-x">
<qrcode-vue :value="test" render-as="svg"></qrcode-vue>
<qrcode-canvas :value="test"></qrcode-canvas>
<qrcode-svg :value="test" :image-settings="imageSettings"></qrcode-svg>
</p>
<p><input v-model="test" /></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.5/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/qrcode.vue@3.5/dist/qrcode.vue.browser.min.js"></script>
<script>
Vue.createApp({
data() { return {
test: 'Hello World',
imageSettings: {
src: 'https://avatars.githubusercontent.com/u/15811268',
width: 30,
height: 30,
excavate: true,
},
}},
components: {
QrcodeVue: QrcodeVue.default,
QrcodeCanvas: QrcodeVue.QrcodeCanvas,
QrcodeSvg: QrcodeVue.QrcodeSvg,
},
}).mount('#root')
</script>