Components
Qr code

QR Code

A component that generates a QR code based on the provided data.

Anatomy

To set up the QR code correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the QR Code component in your project. Let's take a look at the most basic example:

<script setup lang="ts">
import { QrCode } from '@ark-ui/vue/qr-code'
</script>

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

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.

<script setup lang="ts">
import { QrCode } from '@ark-ui/vue/qr-code'
</script>

<template>
  <QrCode.Root value="http://ark-ui.com">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
    <QrCode.Overlay>
      <img src="https://ark-ui.com/icon-192.png" alt="Ark UI Logo" />
    </QrCode.Overlay>
  </QrCode.Root>
</template>

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
<script setup lang="ts">
import { QrCode, type QrCodeGenerateOptions } from '@ark-ui/vue/qr-code'
import { ref } from 'vue'

const encoding = ref<QrCodeGenerateOptions>({ ecc: 'H' })
</script>

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

Using the Root Provider

The RootProvider component provides a context for the qr-code. It accepts the value of the useQr-code hook. You can leverage it to access the component state and methods from outside the qr-code.

<script setup lang="ts">
import { QrCode, useQrCode } from '@ark-ui/vue/qr-code'

const qrCode = useQrCode({ value: 'http://ark-ui.com' })
</script>

<template>
  <button @click="qrCode.setValue('https://ark-ui.com')">Set Value</button>

  <QrCode.RootProvider :value="qrCode">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
  </QrCode.RootProvider>
</template>

If you're using the RootProvider component, you don't need to use the Root component.

API Reference

Root

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
encoding
QrCodeGenerateOptions

The qr code encoding options.

id
string

The unique identifier of the machine.

ids
Partial<{ root: string; frame: string }>

The element ids.

value
string

The value to encode.

Frame

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Overlay

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Pattern

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

RootProvider

PropDefaultType
value
MachineApi<PropTypes>

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.