@qrcodesdk/vue

Vue components for rendering QR codes as inline SVG, PNG-backed Image elements, and Canvas elements.

Install

npm

npm install @qrcodesdk/vue @qrcodesdk/core @qrcodesdk/browser

pnpm

pnpm add @qrcodesdk/vue @qrcodesdk/core @qrcodesdk/browser

vp

vp add @qrcodesdk/vue @qrcodesdk/core @qrcodesdk/browser

deno

deno add @qrcodesdk/vue @qrcodesdk/core @qrcodesdk/browser

bun

bun add @qrcodesdk/vue @qrcodesdk/core @qrcodesdk/browser

yarn

yarn add @qrcodesdk/vue @qrcodesdk/core @qrcodesdk/browser

Quick start

Import the components directly in a Vue single-file component:

<script setup lang="ts">
import {QRCodeCanvas, QRCodeImage, QRCodeSVG} from '@qrcodesdk/vue';
</script>

<template>
  <QRCodeSVG data="https://qrcodesdk.dev" />
  <QRCodeImage data="https://qrcodesdk.dev" />
  <QRCodeCanvas data="https://qrcodesdk.dev" />
</template>

Version compatibility

@qrcodesdk/vue	Vue
0.x.x	^3.3.0

Components

Component	Output	Download support
QRCodeSVG	Inline SVG element	SVG
QRCodeImage	PNG-backed <img>	PNG
QRCodeCanvas	<canvas> element	None

Options

Prop	Type	Description
data	string | number	Required QR code payload.
options	Component-specific options	Optional matrix and renderer configuration.
class	string | object | array	Vue class binding applied to the component wrapper div.

Vue applies class, style, and other fallthrough attributes to the component’s wrapper <div>. Use a template ref when you need a download handle; the rendered SVG, Image, or Canvas remains inside that wrapper.

Live examples

SVG component

Code

<script setup lang="ts">
import type {QRCodeSVGOptions} from '@qrcodesdk/core';
import {QRCodeSVG} from '@qrcodesdk/vue';

const options: QRCodeSVGOptions = {
  title: 'QR code for qrcodesdk.dev',
  ariaLabel: 'Scan to open qrcodesdk.dev',
};
</script>

<template>
  <QRCodeSVG data="https://qrcodesdk.dev" :options="options" />
</template>

Preview

Image component

Code

<script setup lang="ts">
import type {QRCodeImageOptions} from '@qrcodesdk/browser';
import {QRCodeImage} from '@qrcodesdk/vue';

const options: QRCodeImageOptions = {
  size: 8,
  margin: 4,
  alt: 'QR code for qrcodesdk.dev',
  ariaLabel: 'Scan to open qrcodesdk.dev',
};
</script>

<template>
  <QRCodeImage data="https://qrcodesdk.dev" :options="options" />
</template>

Preview

Canvas component

Code

<script setup lang="ts">
import type {QRCodeCanvasOptions} from '@qrcodesdk/browser';
import {QRCodeCanvas} from '@qrcodesdk/vue';

const options: QRCodeCanvasOptions = {
  size: 8,
  margin: 4,
  colors: {
    colorDark: '#111827',
    colorLight: '#ffffff',
  },
};
</script>

<template>
  <QRCodeCanvas data="https://qrcodesdk.dev" :options="options" />
</template>

Preview

PNG download

Code

<script setup lang="ts">
import type {QRCodeImageOptions} from '@qrcodesdk/browser';
import {QRCodeImage, type QRCodeDownloadHandle} from '@qrcodesdk/vue';
import {ref} from 'vue';

const qrcode = ref<QRCodeDownloadHandle | null>(null);
const options: QRCodeImageOptions = {alt: 'QR code for qrcodesdk.dev'};
</script>

<template>
  <div class="flex flex-col items-center">
    <QRCodeImage ref="qrcode" data="https://qrcodesdk.dev" :options="options" />
    <button class="btn-primary" type="button" @click="qrcode?.download('qrcodesdk')">
      Download PNG
    </button>
  </div>
</template>

Preview

Download PNG

Center images

Load and decode a browser image first, store it in a shallowRef, and pass it through options.image.source. Render the Image or Canvas component only after the source is ready. See Add a center image for a complete Vue example.

Download files

• QRCodeSVG exposes download(filename?) and writes an SVG file through a template ref.
• QRCodeImage exposes download(filename?) and writes a PNG file through a template ref.

<script setup lang="ts">
import {ref} from 'vue';

import {type QRCodeDownloadHandle, QRCodeImage} from '@qrcodesdk/vue';

const qrcode = ref<QRCodeDownloadHandle | null>(null);
</script>

<template>
  <button type="button" @click="qrcode?.download('qrcodesdk')">Download PNG</button>
  <QRCodeImage ref="qrcode" data="https://qrcodesdk.dev" />
</template>

The appropriate .svg or .png extension is appended when necessary.

QRCodeCanvas does not include a download method. Use QRCodeImage when you want built-in PNG download support.

See Download or save for SVG, PNG, and manual Canvas downloads.

Server-side rendering

QRCodeSVG produces runtime-neutral SVG and can render on the server.

QRCodeImage and QRCodeCanvas rely on browser DOM and Canvas APIs, so they render an empty wrapper on the server and populate it after mounting in the browser. Their download methods also skip work outside the browser.

Shared configuration

The options prop combines matrix settings with the selected renderer’s settings. Use the builder reference for encoding, version, mask, and error correction; Customize output for shared visual options; and the dedicated renderer references for output-specific options and constraints.

Public API

import {
  type QRCodeBaseProps,
  QRCodeCanvas,
  type QRCodeCanvasProps,
  type QRCodeDownloadHandle,
  QRCodeImage,
  type QRCodeImageProps,
  QRCodeSVG,
  type QRCodeSVGProps,
} from '@qrcodesdk/vue';