Blog Detail

13

Aug
Vue-qrcode  - A QR Code Component for Vue js  cover image

arrow_back Vue-qrcode - A QR Code Component for Vue js

Fengyuan Chen introduced an easy-to-use QR code component based on node-qrcode. It provides many customizable options. You can also add the logo in your Qr Code. It automatically generates optimized segments for best data compression and the smallest QR Code size. You can save the QR code as an image. You can view its demo here.

Installation

You can install this package via npm.

npm install vue@next qrcode @chenfengyuan/vue-qrcode@next

Usage

After installation, you’ve to import this package into your app.js.

import { createApp } from 'vue';
import VueQrcode from '@chenfengyuan/vue-qrcode';
const app = createApp({});
app.component(VueQrcode.name, VueQrcode);

Next, you’ve to include the vue component.

<template>
  <vue-qrcode value="Hello, World!"></vue-qrcode>
  <vue-qrcode value="https://fengyuanchen.github.io/vue-qrcode"></vue-qrcode>
</template>

Add options

This package also provides additional customizing options.

<template>
  <vue-qrcode value="https://fengyuanchen.github.io/vue-qrcode"></vue-qrcode>
  <vue-qrcode
    value="https://fengyuanchen.github.io/vue-qrcode"
    :options="{
      color: {
        dark: '#0074d9',
        light: '#7fdbff',
      },
    }"
  ></vue-qrcode>
</template>

Add a logo

You can also add your logo inside the Qr Code, Here’s an example:

<template>
  <figure class="qrcode">
    <vue-qrcode
      value="https://github.com/fengyuanchen"
      tag="svg"
      :options="{
        errorCorrectionLevel: 'Q',
        width: 200,
      }"
    ></vue-qrcode>
    <img
      class="qrcode__image"
      src="https://avatars.githubusercontent.com/u/3456749"
      alt="Chen Fengyuan"
    />
  </figure>
</template>

<style scoped>
.qrcode {
  display: inline-block;
  font-size: 0;
  margin-bottom: 0;
  position: relative;
}

.qrcode__image {
  background-color: #fff;
  border: 0.25rem solid #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
  height: 15%;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 15%;
}
</style>

Props

Name Type Default Options Description
value string - - The value of the QR code.
options Object - Checkout the available options The options for the QR code generator.
tag string canvas canvas, img, svg The tag of the QR code.

If you wanted to explore more about it you can visit its full documentation and source code on Github.
­­­

Published at : 13-08-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project