Examples

Download

Use a template ref to access the download() method, which supports SVG, PNG, and JPEG output at any target size.

Live example

Export as:

Code

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" level="H" />

  <!-- SVG — vector, infinite resolution -->
  <button @click="qr?.download({ format: 'svg', size: 800 })">SVG</button>

  <!-- PNG — raster at 800×800px -->
  <button @click="qr?.download({ format: 'png', size: 800 })">PNG</button>

  <!-- Custom name -->
  <button @click="qr?.download({ format: 'png', size: 1200, name: 'my-qr' })">
    High-res PNG
  </button>
</template>

DownloadOptions reference

Prop	Type	Default	Description
`format`	`'svg' \| 'png' \| 'jpeg'`	`'svg'`	Output file format. SVG is vector; PNG and JPEG are raster.
`size`	`number`	`500`	Output dimension in pixels (raster formats). SVG ignores this.
`name`	`string`	`'qrcode-nuxt'`	Filename without extension.

SVG downloads preserve your gradients and styles perfectly at any print size. PNG/JPEG are useful when the receiving platform does not support SVG.