vue-qr-style

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

Nested Options

dotsOptions

imageOptions

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