A Nuxt module to provide support for QR Code generation and read.
npm install 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.
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 (client-only)
- [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
- [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
- 📖 Documentation
- ✨ Ease of use
- 🔋 Battery included (opinioneted components)
- 🧩 Extensible (upstream components + utility functions from this module)
- 📷 Read QR Codes
- 📝 Create QR Codes
- 📘 Typescript support
1. Add nuxt-qrcode dependency to your project
``bashUsing pnpm
pnpm add -D 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
$3
You can set default options within your
nuxt.config.ts####
Qrcode and useQrcodeYou 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)'
},
},
})
`$3
####
QrcodeThe
Qrcode component only requires a value prop to work`vue
value="My string to encode"
variant="pixelated"
/>
`But it also accepts all the same props available at
qrcode.options in your nuxt.config.ts.####
QrcodeStreamReady to use component to capture and decode a live feed from the device's camera. As simple as:
`vue
@error="onError"
@detect="onDetect"
/>
``
####
QrcodeCaptrue and QrcodeDropZoneqrcode.s94.dev to learn how to use these components.Development
`bash
Install dependencies
pnpm installGenerate type stubs
pnpm run dev:prepareDevelop with the playground
pnpm run devBuild the playground
pnpm run dev:buildRun ESLint
pnpm run lintRun Vitest
pnpm run test
pnpm run test:watchRelease new version
pnpm run release
``Published under the MIT license.
[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