GitHub
Getting Started

Quick Start

Once installed, you can render a QR code with a single line of markup. No imports needed in Nuxt — the component is automatically available everywhere.

Minimal example

app.vue
<template>
  <VueQRCode value="https://nuxt.com" />
</template>

With error correction

Use the level prop to control error correction. H allows up to 30% of the code to be damaged or covered (e.g. by a logo):

vue
<VueQRCode
  value="https://nuxt.com"
  level="H"
  :size="160"
/>

Styling with a gradient

Pass a gradient object to apply a linear or radial gradient across all QR code elements:

vue
<VueQRCode
  value="https://nuxt.com"
  level="H"
  :gradient="{
    type: 'linear',
    rotation: 135,
    stops: [
      { offset: '0%',   color: '#10b981' },
      { offset: '100%', color: '#3b82f6' },
    ],
  }"
/>

Custom module style

Use dataModulesSettings to change the shape of the small data squares:

vue
<VueQRCode
  value="https://nuxt.com"
  :data-modules-settings="{
    style: 'rounded',
    color: '#10b981',
  }"
/>

Downloading the QR code

Expose the component with a template ref to access the download() method:

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" />
  <button @click="qr?.download({ format: 'png', size: 800 })">
    Download PNG
  </button>
</template>
See the useQrcode & Ref API page for the full download options reference.

Next steps