Vue QR Code

A basic Vue 3 component for rendering QR codes as SVGs. The QR code generation was heavily inspired by this library.

Features

• No additional dependencies
• Small footprint: ~4kB as a gzipped UMD bundle
• Generate QR codes from arbitrary strings
• Customize error correction levels (ECL)
• SVGs can either be rendered as paths or rects (with additional styling)

Installation

npm install -d @vectrex/vue-qrcode and in your components

@import QrCode from '@vectrex/vue-qrcode'

Properties and Attributes

• text - The string to encode into the QR code, required
• options - The object containing options for the QR code generator, defaults to { minVersion: 1, maxVersion: 40, mask: -1, boostEcl: true, ecl: 'M' }
• gutter - The padding between the QR code and the surrounding SVG, defaults to 4
• module-size - The size of each module in the QR code, defaults to 10
• svg-as-path - If true, renders the whole QR code as a single path, otherwise renders each module as a rectangle, defaults to true
• class - the class name to apply to the SVG element
• style - the inline style to apply to the SVG element
• fill, stroke, stroke-width, rx, ry - applied to rect elements if svg-as-path is false

Options

Version and mask are typically selected automatically depending on the size of the QR code. ecl defaults to M (Medium) and boostEcl is set to true.

• minVersion: 1 to 40
• maxVersion: 1 to 40
• mask: -1 (automatic) to 7
• ecl: L, M, Q, H

Examples

Basic Usage

<qr-code text="Howdy!" />

<qr-code text="https://github.com/vectrex/qr-code-generator" />

Set Error Correction Level to High

<qr-code text="https://github.com/vectrex/qr-code-generator" :options="{ ecl: 'H' }" />

Style the SVG and the Modules

Don't expect proper detection...

<qr-code text="https://github.com/vectrex/qr-code-generator" :svg-as-path="false" class="size-96" :module-size="20" stroke="white" stroke-width="1" fill="#024" rx="2" />