Nuxt QRCode

Nuxt QRCode is a module to provide easy support in reading and creating QR Codes.

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
  • [x] composable full of utils to go along with the upstream components
  • [x] provide custom Nuxt component to wrap upstream components with opinionated logic

• Generate QRCodes

  • [x] provide upstream from unjs/uqr
  • [x] composable full of utils to generate qrcodes
    • [ ] server utils
  • [x] provide custom Nuxt component to render QR Codes
    • [x] svg
    • [ ] png

• ✨  Release Notes

• 📖  Documentation

Features

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

Quick Setup

1. Add nuxt-qrcode dependency to your project

# 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

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

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

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

<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

TODO: add examples, for now follow what is available from the upstream docs or current playground implementation.

Development

# 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 ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version
pnpm run release