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

  • provide upstream components from vue-qrcode-reader provide upstream components from [vue-qrcode-reader](https://github.com/gruhn/vue-qrcode-reader)
  • composable full of utils to go along with the upstream components (client-only)
  • provide custom Nuxt component to wrap upstream components with opinionated logic

• Generate QRCodes

  • provide upstream from unjs/uqr provide upstream from [unjs/uqr](https://github.com/unjs/uqr)
  • composable full of utils to generate qrcodes
    • server util (with base64 image support)
    • client util (with base64 image support)
  • provide custom Nuxt component to render QR Codes
    • 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

Follow the documentation on qrcode.s94.dev to learn how to use these components.

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

License

Published under the MIT license.