Dynamic QRCode on Vue

This package is developed thanks to qrcode.vue package.

Sample Image

The result of this component based on your data will be something like above.

:cd: Project setup

npm install vue-qrcode-dynamic

Notice: Install the version 2 of this package if you use Vue 2. npm i vue-qrcode-dynamic@2

Notice: Install the version 3 of this package if you use Vue 3. npm i vue-qrcode-dynamic@3

import globally

1//On Vue 2
2import Vue from "vue";
3import QRCode from "vue-qrcode-dynamic";
4
5Vue.component("QRCode", QRCode);
6
7    
8//On Vue 3
9import { createApp } from "vue";
10import App from "./App.vue";
11import QRCode from "vue-qrcode-dynamic";
12
13const app = createApp(App);
14app.component("QRCode", QRCode);

You can call that on Vue2 or Vue3 according to the above commands. I have named this component to QRCode, you can change it any name.

Notice: Since we usually use QRCode on 1 component or a few components, it is better to call that locally, which is stated below.

These above commands must be written in the main.js file.

import locally

1import QRCode from "vue-qrcode-dynamic";
2
3export default {
4  components: { QRCode },
5  ...
6}

You can also define and use this component locally.

call in the complete HTML format

1    <QRCode
2      value="Hello World"
3      level="H"
4      :QRSize="194"
5      QRBackgroundColor="white"
6      :logoImg="require('@/assets/logo.png')"
7      :logoSize="47"
8      logoBackgroundColor="white"
9    />

Notice: All props are optional, but value, based on your demand. If you put no props and write <QRCode value="Hello World" />, the qrcode will be displayed with the value of Hello World, and the default size of 200*200 px.

Component props

value

• Type: string
• Default: "Hello World"

The value content of qrcode. You can put static or dynamic content.

level

• Type: string
• Default: H

qrcode Error correction level (one of 'L', 'M', 'Q', 'H'). Know more, wikipedia: QR_code

If you use logoBackgroundColor props, I recommend to use level:H . Because you might deal with some issues to read the qrcode when you use others levels when you have a big logo with logoBackgroundColor props.

QRSize

• Type: number
• Default: 200

The pixel size of qrcode element. Its width and height will be the same size.

QRBackgroundColor

• Type: string
• Default: transparent

The background color of qrcode. You can specify any color, like "white" even hash type, like "#ffffff".

logoImg

• Type: string
• Default: ""

The image of middle of the qrcode. If you want to put a logo or specific photo in the middle of qrcode, you can put it static or dynamic by specifying its address.

Notice: If the logo doesn't get loaded during 5 seconds after loading the page, or appeared like broken image, the logo won't be displayed at all.

logoSize

• Type: number
• Default: 30

The pixel size of logo element. Its width and height will be the same size. Considering, the max size of the logo will be at most 1/3 of the QRCode size to make the qrcode readable. In other words, if you put :QRSize="180" and :logoSize="100", the max logo size will be set automatically on 60, due to stated reason.

logoBackgroundColor

• Type: string
• Default: transparent

The background color of logo. You can specify any color, like "white" even hash type, like "#ffffff". It will be set with a padding 2 pixel.

Contact Me

I hope these package will be useful for you. If you see any issue or concern in this case, please let me know through this email hami.khosravi@gmail.com. to get them fixed ASAP.