API Reference

VueQRCode

The <VueQRCode> component renders a fully customizable SVG QR code. It exposes a download() method via template ref.

Props

Prop	Type	Default	Description
`value`*	`string \| string[]`	—	The data to encode. Pass an array to create a multi-segment QR code.
`size`	`number`	`128`	The rendered width and height of the SVG in pixels.
`level`	`'L' \| 'M' \| 'Q' \| 'H'`	`'M'`	Error correction level. L=7%, M=15%, Q=25%, H=30% damage tolerance.
`marginSize`	`number`	`4`	Number of quiet-zone modules surrounding the code. 4 is the QR spec minimum.
`minVersion`	`number`	`1`	Minimum QR version (1–40). Higher versions store more data.
`boostLevel`	`boolean`	`true`	Allow the encoder to raise the error correction level when it fits without increasing the version.
`background`	`string \| GradientSettings`	`'#FFFFFF'`	Background fill. Omit for transparent.
`gradient`	`GradientSettings`	—	Gradient applied to all foreground elements (data modules and finder patterns). See GradientSettings.
`dataModulesSettings`	`DataModulesSettings`	—	Controls the style, color, and size of data modules. See DataModulesSettings.
`finderPatternOuterSettings`	`FinderPatternOuterSettings`	—	Controls the outer ring of the three corner finder patterns. See FinderPatternOuterSettings.
`finderPatternInnerSettings`	`FinderPatternInnerSettings`	—	Controls the inner dot of the three corner finder patterns. See FinderPatternInnerSettings.
`imageSettings`	`ImageSettings`	—	Embeds an image (e.g. a logo) inside the QR code. See ImageSettings.
`svgProps`	`Record<string, unknown>`	—	Additional attributes forwarded to the root <svg> element.

Template ref / expose

The component exposes two members via defineExpose:

Prop	Type	Default	Description
`svg`	`SVGSVGElement \| null`	—	Direct reference to the rendered SVG DOM node.
`download`	`(options?: DownloadOptions) => void`	—	Trigger a file download. Supports SVG, PNG, and JPEG output.

Usage

vue

<script setup lang="ts">
import type { QrCodeNuxt } from 'qrcode-nuxt/runtime'

const qr = useTemplateRef<QrCodeNuxt>('qr')
</script>

<template>
  <VueQRCode
    ref="qr"
    value="https://nuxt.com"
    :size="200"
    level="H"
    :margin-size="4"
    :gradient="{
      type: 'linear',
      rotation: 135,
      stops: [
        { offset: '0%',   color: '#10b981' },
        { offset: '100%', color: '#3b82f6' },
      ],
    }"
    :data-modules-settings="{ style: 'rounded' }"
    :finder-pattern-outer-settings="{ style: 'rounded-lg' }"
    :finder-pattern-inner-settings="{ style: 'microchip' }"
  />

  <button @click="qr?.download({ format: 'png', size: 800 })">
    Download PNG
  </button>
</template>

DownloadOptions

Prop	Type	Default	Description
`format`	`'svg' \| 'png' \| 'jpeg'`	`'svg'`	Output file format.
`size`	`number`	`500`	Output file size in pixels (for raster formats).
`name`	`string`	`'qrcode-nuxt'`	Output filename (without extension).

The download function is client-only. It checks for typeof document !== 'undefined' before running so it is safe to call on SSR builds.