@vdhoangson/vue-qrcode

A simple, flexible, and high-performance QR Code component for Vue 3.

Features

• 🚀 Vue 3 Support: Built specifically for Vue 3.
• 🎨 Highly Customizable: Control colors, size, error correction, and more.
• 🖼️ Multiple Render Types: Support for both HTML5 Canvas and Image versions.
• 📦 Lightweight: Small bundle size with minimal dependencies.
• 🛡️ TypeScript: Fully typed for a great developer experience.

Installation

npm install @vdhoangson/vue-qrcode qrcode
# or
yarn add @vdhoangson/vue-qrcode qrcode

Usage

Global Registration

import { createApp } from 'vue'
import VueQrcode from '@vdhoangson/vue-qrcode'
import App from './App.vue'

const app = createApp(App)
app.use(VueQrcode)
app.mount('#app')

Local Registration

<script setup>
import { Qrcode } from '@vdhoangson/vue-qrcode'
</script>

<template>
  <Qrcode value="Hello World!" :width="200" />
</template>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | - | The content of the QR code. | | width | number | undefined | The width of the QR code in pixels. | | type | 'canvas' \| 'img' | 'canvas' | The render method. | | color | { dark?: string, light?: string } | { dark: '#000000ff', light: '#ffffffff' } | The colors for the QR code (RGBA HEX). | | errorCorrectionLevel | 'L' \| 'M' \| 'Q' \| 'H' | 'M' | Error correction level. | | margin | number | 4 | The margin size. |

License

MIT