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

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