Nuxt QRCode v0.4.1

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 v3 integration

In case you have installed Nuxt UI or UI-Pro v3 this module will automatically use their design tokens 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,
    },
  },
})