Fast SVG QR Code for Vue

QrCode.Vue

// Fast and does not need width/height (CSS sizing is more powerful)
// https://github.com/udwarf/qrcode-compact-svg
import { QRCode as QRCodeSvg } from "./qrcode-compact-svg";

export default {
  name: "qr-code",
  props: {
    content: { type: String, required: true }, // URL or text to encode
    padding: { type: Number, default: 1 }, // 0 .. 1 padding
    color: { type: String, default: "black" }, // Foreground color
    background: { type: String, default: "white" }, // Background color
    // https://www.qrcode.com/en/about/error_correction.html
    ecl: { type: String, default: "L" }, // QR Code Error Correction Level (L 7%, M 15%, Q 25%, H 30%)
    container: { type: String, default: "svg" }
    // container options:
    // svg - populate squares in a SVG document with width and height attriute, recommended for converting to raster images or PDF where QR Code is being static (exact size)
    // g - put squares in g element, useful when you need to put multiple QR Codes in a single SVG document
    // none - no wrapper
  },
  render(h) {
    return h("div", {
      domProps: {
        innerHTML: new QRCodeSvg(this.$props).svg()
      }
    });
  }
};

qrcode-compact-svg has a save() method you won't want since it depends fs module from NodeJS.

Can apply styles to the outer <div> to resize, add padding, border etc.

Example

<template>
...
  <qr-code class="qrcode" :padding="3" content="https://github.com/tohagan" ecl="Q" />
...
</template>

<style lang="sass">
.qrcode
  border: 1px dashed pink;
  width: 30vw;
  max-width: 150px;
  display: block;
  margin: auto;
</style>