GitHub
QRCODE-NUXT

The ultimate customizable
QR code generator
for Vue & Nuxt

A full port of the react-qr-code feature set to the Vue ecosystem. Style every pixel: data modules, finder patterns, gradients, image embedding, and SVG/PNG/JPEG export.

Get startedLive demo
bash
pnpm add qrcode-nuxt
✦

Highly Customizable

13 data module styles, 15 finder pattern styles, per-element color control, and gradient support for every layer.

◈

SVG-Based Rendering

Pure SVG output — infinitely scalable, crisp at any resolution, and ready for print or high-DPI screens.

⬡

Nuxt Auto-Imports

<VueQRCode>, <QrcodeNuxt>, and the useQrcode composable are auto-imported with zero config.

⬡

Download API

Expose a download() method via ref to export your QR code as SVG, PNG, or JPEG at any size.

◎

TypeScript First

Fully typed props, composable options, and return values. Intellisense coverage for every setting.

✦

SSR Compatible

The SVG renderer works server-side. Download utilities safely gate on document availability.

Quick example

Drop the component anywhere in your Nuxt app — no imports required.

app.vue
<template>
  <VueQRCode
    value="https://nuxt.com"
    :size="200"
    level="H"
    :gradient="{
      type: 'linear',
      rotation: 135,
      stops: [
        { offset: '0%',   color: '#10b981' },
        { offset: '100%', color: '#3b82f6' },
      ],
    }"
    :data-modules-settings="{ style: 'rounded' }"
  />