qrcode.vue

Star {{ stargazersCount }}

A Vue component for QRCode. Supports both Vue 2 and Vue 3. It offers two QR code formats: canvas and svg. Customize size, margins, error correction level, foreground and background colors, logo images, and gradient effects.

Installation

npm install --save qrcode.vue
# or
pnpm add qrcode.vue
yarn add qrcode.vue

The component provides three build formats:

File Format
qrcode.vue.cjs.js CommonJS
qrcode.vue.esm.js ES module
qrcode.vue.browser.min.js UMD (browser)

Quick Start

import { createApp } from 'vue'
import QrcodeVue from 'qrcode.vue'

createApp({
  data: { value: 'https://example.com' },
  template: '<qrcode-vue :value="value"></qrcode-vue>',
  components: { QrcodeVue },
}).mount('#root')

Component Props

Prop Type Default Description
value string '' The content to encode in the QR code.
size number 100 The size (width and height) of the QR code element in pixels.
render-as 'canvas' | 'svg' 'canvas' Render format. Use svg for SSR compatibility.
margin number 0 Width of the quiet zone around the QR code.
level 'L' | 'M' | 'Q' | 'H' 'L' Error correction level. Higher levels allow more damage recovery.
background string '#ffffff' Background color of the QR code.
foreground string '#000000' Foreground color of the QR code modules.
radius number 0 Corner radius ratio (0 to 0.5) for each module. 0.5 produces circles.
gradient boolean false Enable gradient fill for the QR code modules.
gradient-type 'linear' | 'radial' 'linear' Type of gradient when gradient is enabled.
gradient-start-color string '#000000' Start color of the gradient.
gradient-end-color string '#ffffff' End color of the gradient.
image-settings ImageSettings {} Logo image settings. See details below.
id string undefined Custom ID for SVG internal elements. Pass useId() for SSR hydration consistency.
class string '' CSS class name applied to the QR code element.

Image Settings

type ImageSettings = {
  src: string            // URL of the logo image
  x?: number             // Horizontal offset (centers by default)
  y?: number             // Vertical offset (centers by default)
  height: number         // Height of the image in pixels
  width: number          // Width of the image in pixels
  excavate?: boolean     // Remove modules behind the image
  borderRadius?: number  // Border radius of the image
  crossOrigin?: 'anonymous' | 'use-credentials' | ''  // CORS attribute for the image
}

TypeScript Example

<script setup lang="ts">
import { ref } from 'vue'
import QrcodeVue from 'qrcode.vue'
import type { Level, RenderAs, GradientType, ImageSettings } from 'qrcode.vue'

const value = ref('https://example.com')
const level = ref<Level>('M')
const renderAs = ref<RenderAs>('svg')
const background = ref('#ffffff')
const foreground = ref('#000000')
const margin = ref(0)

const imageSettings = ref<ImageSettings>({
  src: 'https://github.com/scopewu.png',
  width: 30,
  height: 30,
  excavate: true,
  // crossOrigin: 'anonymous', // Set this when exporting canvas to image
})

const gradient = ref(false)
const gradientType = ref<GradientType>('linear')
const gradientStartColor = ref('#000000')
const gradientEndColor = ref('#38bdf8')
const radius = ref(0)
</script>

Template Ref Methods

Both QrcodeCanvas and QrcodeSvg expose the following methods via template ref. Allowing users to download the generated QRCode directly from the browser.QrcodeVue forwards them based on the current render-as:

Component Method Signature Description
QrcodeCanvas toDataURL (type?: string, quality?: number) => string | undefined Convert the QR code to a data URL.
download (filename?: string) => void Trigger a download of the QR code image.
QrcodeSvg toDataURL () => string | undefined Convert the SVG element to a data URL.
download (filename?: string) => void Trigger a download of the QR code as an SVG image.

QrcodeCanvas

<script setup lang="ts">
import { ref } from 'vue'
import { QrcodeCanvas } from 'qrcode.vue'

const qrRef = ref()

const handleDownload = () => {
  qrRef.value?.download('my-qrcode.png')
}
</script>

<qrcode-canvas ref="qrRef" value="https://example.com" />

CORS note: When the QR code includes a cross-origin logo image, make sure to set imageSettings.crossOrigin: 'anonymous' and that the image server responds with the Access-Control-Allow-Origin header. Otherwise the canvas becomes "tainted" and toDataURL / download will throw a SecurityError.

QrcodeSvg

<script setup lang="ts">
import { ref } from 'vue'
import { QrcodeSvg } from 'qrcode.vue'

const qrRef = ref()

const handleDownload = () => {
  qrRef.value?.download('my-qrcode.svg')
}
</script>

<qrcode-svg ref="qrRef" value="https://example.com" />

Named Exports (v3.5+)

Starting from v3.5, separate QrcodeCanvas and QrcodeSvg components are exported:

import { QrcodeCanvas, QrcodeSvg } from 'qrcode.vue'

// CommonJS / CDN usage
const { default: QrcodeVue, QrcodeCanvas, QrcodeSvg } = require('qrcode.vue')

Preview

Generated Code

{{ usageExample }}

Settings

Image Settings