QR Code

#Basic usage

qr-code/basic.vue

<script setup lang="ts">
import { QrCode } from "@bysages/vue";
</script>

<template>
  <QrCode.Root value="https://www.bysages.com/">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
  </QrCode.Root>
</template>

#Props

#DownloadTrigger

Prop	Type	Description
`fileName`	`string`	The name of the file.
`mimeType`	`DataUrlType`	The mime type of the image.
`quality`	`number \| undefined`	The quality of the image.

#Frame

A styled part — no props of its own; it takes the anatomy's shared styling.

#Overlay

A styled part — no props of its own; it takes the anatomy's shared styling.

#Pattern

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Description
`defaultValue`	`string`	The initial value to encode when rendered. Use when you don't need to control the value of the qr code.
`encoding`	`qrcode.QrCodeGenerateOptions`	The qr code encoding options.
`id`	`string`	The unique identifier of the machine.
`ids`	`Partial<{ root: string; frame: string; }>`	The element ids.
`modelValue`	`string`	The v-model value of the qr code
`pixelSize`	`number`	The pixel size of the qr code.