README.md

QR Code

Easy to use QR code component, bases on node-qrcode.

Basic usage

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

Add 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>

Custom tag

<template>
  <vue-qrcode value="https://fengyuanchen.github.io/vue-qrcode" tag="img"></vue-qrcode>
  <vue-qrcode value="https://fengyuanchen.github.io/vue-qrcode" tag="svg" :options="{ width: 148 }"></vue-qrcode>
</template>

Add a logo

Covering

<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>

Drawing

Only available to canvas elements.

<template>
  <vue-qrcode
    value="https://github.com/fengyuanchen"
    :options="{
      errorCorrectionLevel: 'Q',
      width: 200,
    }"
    @ready="onReady"
  ></vue-qrcode>
</template>

<script>
export default {
  methods: {
    onReady(canvas) {
      const context = canvas.getContext('2d');
      const image = new Image();

      image.src = 'https://avatars.githubusercontent.com/u/3456749';
      image.crossorigin = 'anonymous';
      image.onload = () => {
        const coverage = 0.15;
        const width = Math.round(canvas.width * coverage);
        const x = (canvas.width - width) / 2;

        this.drawImage(context, image, x, x, width, width);
      };
    },

    drawImage(context, image, x, y, width, height, radius = 4) {
      context.shadowOffsetX = 0;
      context.shadowOffsetY = 2;
      context.shadowBlur = 4;
      context.shadowColor = '#00000040';
      context.lineWidth = 8;
      context.beginPath();
      context.moveTo(x + radius, y);
      context.arcTo(x + width, y, x + width, y + height, radius);
      context.arcTo(x + width, y + height, x, y + height, radius);
      context.arcTo(x, y + height, x, y, radius);
      context.arcTo(x, y, x + width, y, radius);
      context.closePath();
      context.strokeStyle = '#fff';
      context.stroke();
      context.clip();
      context.fillStyle = '#fff';
      context.fillRect(x, x, width, height);
      context.drawImage(image, x, x, width, height);
    },
  },
}
</script>

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.

Events

Name	Parameters	Description
ready	($el)	Fire when the QR code is generated.