vue-qrcode-dynamic v3.0.3
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
//On Vue 2
import Vue from "vue";
import QRCode from "vue-qrcode-dynamic";
Vue.component("QRCode", QRCode);
//On Vue 3
import { createApp } from "vue";
import App from "./App.vue";
import QRCode from "vue-qrcode-dynamic";
const app = createApp(App);
app.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
import QRCode from "vue-qrcode-dynamic";
export default {
components: { QRCode },
...
}
You can also define and use this component locally.
call in the complete HTML format
<QRCode
value="Hello World"
level="H"
:QRSize="194"
QRBackgroundColor="white"
:logoImg="require('@/assets/logo.png')"
:logoSize="47"
logoBackgroundColor="white"
/>
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.