Nuxt QRCode v0.4.0

QRCode Component

Learn how to generate QRCodes using the related component.

Value

The Qrcode component only requires a single value prop to work.

<template>
  <Qrcode value="https://qrcode.s94.dev" />
</template>

Variants

Currently there are a number of variants available to style QRCodes. Some of them also accept a radius prop to customize the roudness of their corners.

<template>
  <Qrcode value="qrcode.s94.dev" variant="pixelated" :radius="1" />
</template>
Both variant and radius accept an object to selectively customize markers (both the outer and inner portion) and pixels:
:variant="{
  inner: 'circle',
  marker: 'rounded',
  pixel: 'dots'
}"

Global styling

We can customize how the white and black pixels should be colored by either editing the white-color and black-color props or by setting them globally in the qrcode.options in the nuxt.config.ts.

In the following example we use Nuxt UI v3 design tokens to customize the qrcode colors:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-qrcode'],

  qrcode: {
    options: {
      variant: 'rounded',
      radius: 1,
      blackColor: 'var(--ui-text-highlighted)',
      whiteColor: 'var(--ui-bg)',
    },
  },
})

<template>
  <Qrcode value="https://nuxt.com" />
</template>