API Reference

useQrcode

The useQrcode composable is the reactive core that powers <VueQRCode>. Use it directly when you need raw access to QR matrix data for custom rendering.

In Nuxt apps, useQrcode is auto-imported. In plain Vue, import it from qrcode-nuxt/runtime.

Options

Prop	Type	Default	Description
`value`*	`MaybeRefOrGetter<string \| string[]>`	—	The data to encode. Reactive — wrap in computed() to update the QR code automatically.
`level`*	`MaybeRefOrGetter<ErrorCorrectionLevel>`	—	Error correction level: L, M, Q, or H.
`minVersion`*	`MaybeRefOrGetter<number>`	—	Minimum QR version (1–40).
`size`*	`MaybeRefOrGetter<number>`	—	Rendered size in pixels (used to calculate image settings).
`marginSize`	`MaybeRefOrGetter<number \| undefined>`	—	Quiet-zone modules. Defaults to 4.
`imageSettings`	`MaybeRefOrGetter<ImageSettings \| undefined>`	—	Image embedding config.
`boostLevel`	`MaybeRefOrGetter<boolean \| undefined>`	—	Allow encoder to boost error correction.

Return values

Prop	Type	Default	Description
`qrcode`	`ComputedRef<QrCode>`	—	The raw qrcodegen QrCode object.
`cells`	`ComputedRef<Modules>`	—	The 2D boolean grid of QR modules (rows × columns).
`margin`	`ComputedRef<number>`	—	The resolved margin in modules.
`numCells`	`ComputedRef<number>`	—	Total grid size including margins (cells.length + margin * 2).
`calculatedImageSettings`	`ComputedRef<CalculatedImageSettings \| null>`	—	Resolved image position and excavation data.

Usage

vue

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

const value = ref('https://nuxt.com')

// useQrcode is auto-imported in Nuxt
const { cells, numCells, margin } = useQrcode({
  value: computed(() => value.value),
  level: 'H',
  minVersion: 1,
  size: 200,
})
</script>

<template>
  <svg
    :viewBox="`0 0 ${numCells} ${numCells}`"
    width="200"
    height="200"
  >
    <template v-for="(row, y) in cells" :key="y">
      <template v-for="(cell, x) in row" :key="x">
        <rect
          v-if="cell"
          :x="x + margin"
          :y="y + margin"
          width="1"
          height="1"
          fill="black"
        />
      </template>
    </template>
  </svg>
</template>

QrCodeNuxt

The type exposed by the <VueQRCode> component ref:

interface QrCodeNuxt {
  svg: SVGSVGElement | null
  download: (options?: DownloadOptions) => void
}