Nuxt QRCode is a module to provide easy support in reading and creating QR Codes.
Warning
This project is currently in stall. Main reason being a lack of experience in html canvas and how to customize generated 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.
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
- provide custom Nuxt component to render QR Codes
- ✨ Ease of use
- 🔋 Battery included (opinioneted components)
- 🧩 Extensible (upstream components + utility functions from this module)
- 📷 Read QR Codes
- 📝 Create QR Codes
- 📘 Typescript support
- 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
- Add
nuxt-qrcode
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-qrcode'
]
})
That's it! You can now use Nuxt QRCode in your Nuxt app ✨
TODO: add examples to readme, for now follow what is available from the upstream docs or current playground.
# 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