QrCode

QR code SVG from a module matrix (uqr)

A scannable code for moving something from a screen or print to a phone — a ticket, a link, Wi-Fi details. Always show what it encodes as text or a link too: it can't be scanned by the phone it's on, or by a screen reader.

Basic

27×27 modules, ECC M

<script setup lang="ts">
import { computed, ref } from "vue";
import { BlessInput, BlessQrCode } from "blessing-ui";
import { encode } from "uqr";
const text = ref("https://www.saenai.tv/");
const matrix = computed(() => encode(text.value, { ecc: "M" }).data);
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col">
      <BlessInput v-model="text" placeholder="text or URL" aria-label="Text to encode" />
      <small>{{ matrix.length }}×{{ matrix.length }} modules, ECC M</small>
    </div>
    <BlessQrCode :matrix :value="text" />
    <BlessQrCode :matrix :value="text" :size="120" frame />
  </div>
</template>

Install

No encoder is bundled. uqr (~10 KB, ESM, zero deps) gives the module matrix:

pnpm add uqr

import { encode } from "uqr";
const matrix = encode("https://…", { ecc: "M" }).data; // boolean[][]

Pass the module grid as matrix; any encoder works. Modules stay square and dark-on-white whatever the theme, since inverted or low-contrast codes scan badly — keep the default colours and border. The optional frame sets the tile on a plate.

• It is an image named "QR code: …" from value (or label).

Usage

import { BlessQrCode } from "blessing-ui";

API

Props

Name	Type	Default	Description
matrix*	boolean[][]	—	boolean module grid, e.g. `encode(text).data` from uqr
value	string	—	what the code encodes — used for the accessible label
size	number	160
border	number	2	quiet zone in modules
color	string	"#1a1b1d"	module colour — dark on light scans best, so this ignores the theme by default
background	string	"#fff"
frame	boolean	false	skewed ink plate behind the tile
label	string	—