qrcode.vue

Star {{ stargazersCount }}

View on GitHub →

A Vue.js 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
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
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
}

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,
})

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

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