Nuxt QRCode

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

Important

This module is still a work in progress. Expect breaking changes to adjust the aim. Feel free to open issue to discuss use cases.

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

• Generate QRCodes

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

• ✨  Release Notes

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

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

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