Qr Code

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/qr-code.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/qr-code.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/qr-code.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/qr-code.json
    

Usage

      Copy
      <script setup lang="ts">
import { QrCode } from "@/components/ui/qr-code";
</script>

<template>
  <QrCode.Root default-value="http://ark-ui.com">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
  </QrCode.Root>
</template>
    

Composition

      Copy
      QrCode.Root
├── QrCode.Frame
│   └── QrCode.Pattern
├── QrCode.Overlay
├── QrCode.DownloadTrigger
├── QrCode.Context
└── QrCode.RootProvider
    

Examples

With Overlay

You can also add a logo or overlay to the QR code. This is useful when you want to brand the QR code.

Error Correction

In cases where the link is too long or the logo overlay covers a significant area, the error correction level can be increased.

Use the encoding.ecc or encoding.boostEcc property to set the error correction level:

• L: Allows recovery of up to 7% data loss (default)
• M: Allows recovery of up to 15% data loss
• Q: Allows recovery of up to 25% data loss
• H: Allows recovery of up to 30% data loss

Root Provider

An alternative way to control the QR code is to use the RootProvider component and the useQrCode hook. This way you can access the state and methods from outside the component.

Download

Use the QrCode.DownloadTrigger component to allow users to download the QR code as an image. Specify the fileName and mimeType props for the downloaded file.

API

See Ark UI Qr Code docs for full props and examples.