Getting Started

Installation

Setting up qrcode-nuxt is quick and easy. Install it using your preferred package manager:

pnpm

pnpm add qrcode-nuxt

npm

npm i qrcode-nuxt

yarn

yarn add qrcode-nuxt

bun

bun add qrcode-nuxt

Nuxt setup

Add qrcode-nuxt to the modules array in your nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['qrcode-nuxt'],
})

That's it. The module auto-registers <VueQRCode>, <QrcodeNuxt>, and the useQrcode composable — no explicit imports needed anywhere in your app.

Both <VueQRCode> and <QrcodeNuxt> are identical aliases. Use whichever fits your naming conventions.

Vue (without Nuxt)

Import the component directly from the runtime entry point:

MyComponent.vue

<script setup lang="ts">
import { VueQRCode } from 'qrcode-nuxt/runtime'
</script>

<template>
  <VueQRCode value="https://vuejs.org" />
</template>

Module options

The module accepts optional configuration in nuxt.config.ts:

nuxt.config.ts

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

  qrcodeNuxt: {
    // Rename the auto-imported component (or set false to disable)
    componentName: 'VueQRCode',

    // Also register <QrcodeNuxt /> as an alias
    registerAlias: true,
})

Prop	Type	Default	Description
`componentName`	`string \| false`	`'VueQRCode'`	Name used for the auto-imported component. Set to false to disable registration.
`registerAlias`	`boolean`	`true`	Also register the component as <QrcodeNuxt />.

Peer dependencies

qrcode-nuxt has no runtime dependencies beyond Vue and Nuxt themselves:

bash

nuxt   >= 3.0.0 || 4.0.0
vue    >= 3.5.0