vue-qrcode-dynamic
v3.0.3
Published
Creating a qrcode along with logo on Vue simply
Downloads
11
Maintainers
Readme
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 [email protected]. to get them fixed ASAP.