Nuxt QRCode v0.4.8
Guide

Configuration

Learn how to configure Nuxt QRCode in your Nuxt application

Customize defaults

You can set default options within your nuxt.config.ts.

Qrcode and useQrcode

You can customize things like:

  • default variant style
  • radius (0 is none, 1 is full)
  • and css color for black and white pixels
export default defineNuxtConfig({
  modules: ['nuxt-qrcode'],

  qrcode: {
    options: {
      variant: 'pixelated',
      // OR
      variant: {
        inner: 'circle',
        marker: 'rounded',
        pixel: 'rounded',
      },
      radius: 1,
      blackColor: 'currentColor',
      whiteColor: 'transparent',
    },
  },
})

Nuxt UI integration

In case you have installed Nuxt UI or UI-Pro this module will automatically use configured colors to color the generated QRCodes.

You only need to make sure to register nuxt-qrcode after Nuxt UI:

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui', // or `@nuxt/ui-pro`
    'nuxt-qrcode',
  ],
})
In case you want to revert this, you just have to disable it:
export default defineNuxtConfig({
  // ...

  qrcode: {
    options: {
      disableNuxtUiIntegration: true,
    },
  },
})

Installation

Learn how to install Nuxt QRCode in your Nuxt application

Qrcode Component

Learn how to generate QRCodes using the related component.