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:

FileFormat
qrcode.vue.cjs.jsCommonJS
qrcode.vue.esm.jsES module
qrcode.vue.browser.min.jsUMD (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

PropTypeDefaultDescription
valuestring''The content to encode in the QR code.
sizenumber100The size (width and height) of the QR code element in pixels.
render-as'canvas' | 'svg''canvas'Render format. Use svg for SSR compatibility.
marginnumber0Width of the quiet zone around the QR code.
level'L' | 'M' | 'Q' | 'H''L'Error correction level. Higher levels allow more damage recovery.
backgroundstring'#ffffff'Background color of the QR code.
foregroundstring'#000000'Foreground color of the QR code modules.
radiusnumber0Corner radius ratio (0 to 0.5) for each module. 0.5 produces circles.
gradientbooleanfalseEnable gradient fill for the QR code modules.
gradient-type'linear' | 'radial''linear'Type of gradient when gradient is enabled.
gradient-start-colorstring'#000000'Start color of the gradient.
gradient-end-colorstring'#ffffff'End color of the gradient.
image-settingsImageSettings{}Logo image settings. See details below.
idstringundefinedCustom ID for SVG internal elements. Pass useId() for SSR hydration consistency.
classstring''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:

ComponentMethodSignatureDescription
QrcodeCanvastoDataURL(type?: string, quality?: number) => string | undefinedConvert the QR code to a data URL.
download(filename?: string) => voidTrigger a download of the QR code image.
QrcodeSvgtoDataURL() => string | undefinedConvert the SVG element to a data URL.
download(filename?: string) => voidTrigger 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