Vue QR Style 🎨

A premium Vue 3 component for generating highly customizable QR codes, powered by qr-code-styling.

Features

• 🚀 Vue 3 + TypeScript - Built with Composition API and full type safety.
• 🎨 Extremely Customizable - Change dots, corners, backgrounds, and more.
• ⭕ Shape Support - Support for both standard Square and modern Circle QR shapes.
• 🌈 Gradient Support - Beautiful linear and radial gradients for dots and backgrounds.
• 🖼️ Logo Embedding - Add your brand logo with smart dot-hiding logic.
• 💾 Multi-format Download - Export as SVG, PNG, JPEG, or WebP.
• ⚡ Reactive - Updates in real-time as props change.

Installation

npm install vue-qr-style qr-code-styling

Setup

Global Registration

import { createApp } from "vue";
import VueQrStyle from "vue-qr-style";
import App from "./App.vue";

const app = createApp(App);
app.use(VueQrStyle);
app.mount("#app");

Local Registration

<script setup>
import { QrCodeGenerator } from "vue-qr-style";
</script>

Basic Usage

<template>
  <QrCodeGenerator
    data="https://github.com/jdavidoa91/vue-qr-style"
    :width="300"
    :height="300"
    :dotsOptions="{ type: 'rounded', color: '#41b883' }"
  />
</template>

API Reference

Main Props

| Prop | Type | Default | Description | | -------- | ---------------------- | ------------ | ----------------------------------------------------- | | data | string | Required | The content of the QR code. | | width | number | 300 | Width of the QR code. | | height | number | 300 | Height of the QR code. | | margin | number | 0 | Margin around the QR code cells. | | type | 'canvas' \| 'svg' | 'canvas' | Drawing type. SVG is recommended for high resolution. | | shape | 'square' \| 'circle' | 'square' | The overall shape of the QR code. | | image | string | undefined | URL/Path of the center image/logo. |

Nested Options

dotsOptions

| Property | Type | Default | Description | | ---------- | --------- | ----------- | ------------------------------------------------------------------------------------ | | type | DotType | 'square' | 'square' \| 'dots' \| 'rounded' \| 'extra-rounded' \| 'classy' \| 'classy-rounded' | | color | string | '#000' | Solid color of the dots. | | gradient | object | undefined | Gradient configuration (Type, rotation, colorStops). |

imageOptions

| Property | Type | Default | Description | | -------------------- | --------- | ------------- | -------------------------- | | hideBackgroundDots | boolean | true | Hide dots behind the logo. | | imageSize | number | 0.4 | Size coefficient (0 to 1). | | margin | number | 0 | Margin around the logo. | | crossOrigin | string | 'anonymous' | CORS policy for the image. |

Exposed Methods

Access these via a component ref:

const qrRef = ref<InstanceType<typeof QrCodeGenerator> | null>(null);

// Download the QR
qrRef.value?.download({
  name: "my-qr",
  extension: "png",
});

// Get raw blob/data
const data = await qrRef.value?.getRawData("svg");

TypeScript Support

The package exports all relevant types:

import type {
  QRCodeStylingOptions,
  DotType,
  FileExtension,
} from "vue-qr-style";

Troubleshooting

Content is not showing / Logo issues

• Ensure the data prop is not an empty string.
• If using an external logo URL, ensure it allows CORS. You can adjust the imageOptions.crossOrigin prop if needed.

License

MIT