# nuxt-qrcode

> A Nuxt module to provide support for QR Code generation and read.

Latest version **0.4.10** (published 2026-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install nuxt-qrcode
pnpm add nuxt-qrcode
yarn add nuxt-qrcode
bun add nuxt-qrcode
```

## Health

**Score 55/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; has provenance.

Warnings: low downloads; no types; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.4.10 |
| Published | 2026-04-01 |
| First published | 2024-03-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 61.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 89 |
| Author | Sandro Circi |
| Maintainers | sandros94 |

## Links

- npm: https://www.npmjs.com/package/nuxt-qrcode
- Repository: https://github.com/sandros94/nuxt-qrcode
- Homepage: https://qrcode.s94.dev
- Issues: https://github.com/sandros94/nuxt-qrcode/issues
- npm.io page: https://npm.io/package/nuxt-qrcode

## Dependencies (5)

- [uqr](https://npm.io/package/uqr.md) ^0.1.2
- [defu](https://npm.io/package/defu.md) ^6.1.6
- [@nuxt/kit](https://npm.io/package/@nuxt/kit.md) ^4.4.2
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^14.1.0
- [vue-qrcode-reader](https://npm.io/package/vue-qrcode-reader.md) ^5.7.3

## Recent versions

- 0.4.10 (latest) — 2026-04-01
- 0.4.9 — 2026-03-21
- 0.4.8 — 2025-09-10
- 0.4.7 — 2025-09-04
- 0.4.6 — 2025-06-29
- 0.4.5 — 2025-06-29
- 0.4.4 — 2025-06-28
- 0.4.3 — 2025-06-28
- 0.4.2 — 2025-06-28
- 0.4.1 — 2024-12-04
- 0.4.0 — 2024-11-19
- 0.3.0 — 2024-11-11
- 0.2.3 — 2024-11-10
- 0.2.2 — 2024-11-08
- 0.2.1 — 2024-10-13
- … 5 more at https://npm.io/package/nuxt-qrcode/versions

## README

# Nuxt QRCode

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

Nuxt QRCode is a module to provide easy support in reading and creating [QR Codes](https://en.wikipedia.org/wiki/QR_code).

### Current Roadmap

The following are the features that I'm currently working on and plan to release in the upcoming days/weeks

- Read QRCodes
  - [x] provide upstream components from [vue-qrcode-reader](https://github.com/gruhn/vue-qrcode-reader)
  - [x] composable full of utils to go along with the upstream components (client-only)
  - [x] provide custom Nuxt component to wrap upstream components with opinionated logic
- Generate QRCodes
  - [x] provide upstream from [unjs/uqr](https://github.com/unjs/uqr)
  - [x] composable full of utils to generate qrcodes
    - [x] server util (with base64 image support)
    - [x] client util (with base64 image support)
  - [x] provide custom Nuxt component to render QR Codes
    - [x] svg
    - [ ] png

- [✨  Release Notes](/CHANGELOG.md)
<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/nuxt-qrcode?file=playground%2Fapp.vue) -->
- [📖 &nbsp;Documentation](https://qrcode.s94.dev)

## Features

- ✨ &nbsp;Ease of use
- 🔋 &nbsp;Battery included (opinioneted components)
- 🧩 &nbsp;Extensible (upstream components + utility functions from this module)
- 📷 &nbsp;Read QR Codes
- 📝 &nbsp;Create QR Codes
- 📘 &nbsp;Typescript support

## Quick Setup

1. Add `nuxt-qrcode` dependency to your project

```bash
# Using pnpm
pnpm add -D nuxt-qrcode

# Using yarn
yarn add --dev nuxt-qrcode

# Using npm
npm install --save-dev nuxt-qrcode
```

2. Add `nuxt-qrcode` to the `modules` section of `nuxt.config.ts`

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

That's it! You can now use Nuxt QRCode in your Nuxt app ✨

## How to use it

### 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

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

  qrcode: {
    options: {
      variant: 'pixelated',
      // OR
      variant: {
        inner: 'circle',
        marker: 'rounded',
        pixel: 'rounded',
      },
      radius: 1,
      blackColor: 'currentColor', // 'var(--ui-text-highlighted)' if you are using `@nuxt/ui` v3
      whiteColor: 'transparent',  // 'var(--ui-bg)'
    },
  },
})
```

### Use the components

#### `Qrcode`

The `Qrcode` component only requires a `value` prop to work

```vue
<template>
  <div>
    <Qrcode
      value="My string to encode"
      variant="pixelated"
    />
  </div>
</template>
```

But it also accepts all the same props available at `qrcode.options` in your `nuxt.config.ts`.

#### `QrcodeStream`

Ready to use component to capture and decode a live feed from the device's camera. As simple as:

```vue
<template>
  <div>
    <QrcodeStream
      @error="onError"
      @detect="onDetect"
    />
  </div>
</template>

<script setup lang="ts">
import type { DetectedBarcode } from 'nuxt-qrcode'

function onDetect(detectedCodes: DetectedBarcode[]) {
  // do something with decoded qrcodes `DetectedBarcode['rawValue']
}

function onError(err: Error) {
  // do something on stream error
}
</script>
```

#### `QrcodeCaptrue` and `QrcodeDropZone`

Follow the documentation on [`qrcode.s94.dev`](https://qrcode.s94.dev) to learn how to use these components.

## Development

```bash
# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run Lint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version
pnpm run release
```

## License

Published under the [MIT](/LICENSE) license.


<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/nuxt-qrcode/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/nuxt-qrcode

[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-qrcode.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/nuxt-qrcode

[license-src]: https://img.shields.io/npm/l/nuxt-qrcode.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/nuxt-qrcode

[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com

---
_Source: https://npm.io/package/nuxt-qrcode · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._