QR Code ^0.1.23

Generate QR codes client-side. Pure Vue 3 + SVG, no dependencies — supports custom colors, icons, status overlays, error-correction levels, and canvas export.

1. Basic

Component-ning o'zi minimal — orqa fon yo'q. Kerak bo'lsa VxCard yoki o'zingizning wrapper'ingiz bilan o'rab oling.

vue

<template>
  <VxCard style="display: inline-flex; padding: 12px; background: #fff;">
    <VxQrCode value="https://veloxui.com" />
  </VxCard>
</template>

2. Any payload

Encode any UTF-8 string — URLs, WiFi credentials, vCards, plain text, JSON.

vue

<template>
  <VxInput v-model="text" />
  <VxQrCode :value="text" />
</template>

3. Custom color & background

Background: White Paper Amber Transparent

vue

<template>
  <VxQrCode value="https://veloxui.com" color="#2563eb" bg-color="#f0f9ff" />
</template>

4. Size

Pixel-perfect at any size.

Size: 180px

vue

<template>
  <VxQrCode value="https://veloxui.com" :size="120" />
  <VxQrCode value="https://veloxui.com" :size="200" />
</template>

5. Center icon

Embed a logo. High error-correction keeps the code scannable even with ~30% of modules covered.

vue

<template>
  <VxQrCode
    value="https://github.com/veloxui"
    :icon="githubLogoUrl"
    error-level="H"
    :icon-size="44"
  />
</template>

TIP

Use error-level="H" (30% correction) whenever you overlay an icon. Lower levels may become unscannable.

6. Error-correction level

Higher levels encode more parity, so the code stays readable if partly damaged — but total payload capacity goes down.

L · Low, ~7% recoverable, max capacity

M · Medium, ~15% (default)

Q · Quartile, ~25%

H · High, ~30% — pair with center icon

vue

<template>
  <VxQrCode value="https://veloxui.com" error-level="H" />
</template>

7. Status overlay

Show the code as loading, expired (with refresh), or scanned — exactly like Ant Design's QR Code.

vue

<script setup lang="ts">
import { ref } from 'vue'
const status = ref<'active' | 'expired' | 'loading' | 'scanned'>('active')
function refresh() {
  status.value = 'loading'
  fetchNewCode().then(() => (status.value = 'active'))
}
</script>

<template>
  <VxQrCode
    :value="token"
    :status="status"
    @refresh="refresh"
  />
</template>

8. Decorative styles

Combine dotStyle, finderStyle, and radius to get fully custom looks — circular dots, flowing "fluid" blobs, rounded finder patterns, and rounded outer corners.

Dots + Rounded

dotStyle=dots · finderStyle=rounded

Fluid Blob

dotStyle=fluid · finderStyle=rounded

Inverted Dark

color="#f1f5f9" on dark canvas

Dot Finder

finderStyle=dot · emerald

Warm Amber

fluid · warm amber

Soft Ruby

dots · soft ruby

vue

<template>
  <!-- Circular dots + rounded finder + rounded outer corners -->
  <VxQrCode
    value="https://veloxui.com"
    dot-style="dots"
    finder-style="rounded"
    :radius="20"
    error-level="H"
  />

  <!-- Fluid / connected-blob look -->
  <VxQrCode
    value="https://veloxui.com"
    dot-style="fluid"
    finder-style="rounded"
    :radius="20"
    error-level="H"
  />

  <!-- Dot-style finder (single rounded square per finder) -->
  <VxQrCode
    value="https://veloxui.com"
    dot-style="dots"
    finder-style="dot"
    :radius="24"
    color="#2563eb"
    error-level="H"
  />
</template>

TIP

Always pair decorative styles with errorLevel="H" — the rounded shapes and stylized finders can confuse low-quality scanners. High EC keeps the code readable.

9. SVG vs canvas

Switch the internal renderer. SVG scales crisply and is easier to style; canvas is better for rasterized download.

vue

<template>
  <VxQrCode value="https://veloxui.com" type="canvas" />
</template>

10. Download as PNG

const qr = ref()
function download() {
  const c = document.createElement('canvas')
  c.width = c.height = 512
  qr.value.renderToCanvas(c)
  const a = document.createElement('a')
  a.download = 'qr.png'
  a.href = c.toDataURL('image/png')
  a.click()
}

11. Non-URL payloads

QR codes carry arbitrary UTF-8. A few useful patterns:

WiFi credentials

vCard contact

Phone dialer

vue

<template>
  <!-- WiFi auto-join -->
  <VxQrCode value="WIFI:T:WPA;S:MyNet;P:pass;;" />

  <!-- vCard contact -->
  <VxQrCode :value="vcardString" />

  <!-- Phone -->
  <VxQrCode value="tel:+998901234567" />
</template>

12. Custom status slots

Override any status render with a slot.

Success!

Code invalid

vue

<template>
  <VxQrCode :value="token" status="scanned">
    <template #status-scanned>
      <CheckIcon /> Success!
    </template>
  </VxQrCode>
</template>

Props

Name	Type	Default	Description
`value`	`string`	—	Required. Any UTF-8 text to encode.
`size`	`number`	`160`	Output square size in pixels.
`color`	`string`	`'#000000'`	Dark module color.
`bgColor`	`string`	`'transparent'`	Background color. Default is transparent — no fill drawn.
`errorLevel`	`'L' \| 'M' \| 'Q' \| 'H'`	`'M'`	Error-correction level.
`quietZone`	`number`	`0`	Quiet-zone width in modules. Default is `0` — wrap the QR in your own card/padding. Set to `4` for spec-compliant margin when standalone.
`type`	`'svg' \| 'canvas'`	`'svg'`	Renderer.
`rounded`	`boolean`	`false`	Legacy shortcut for `dotStyle: 'dots'`.
`dotStyle`	`'square' \| 'dots' \| 'fluid'`	`'square'`	Module rendering style. `'fluid'` connects adjacent modules with smooth rounded corners.
`finderStyle`	`'square' \| 'rounded' \| 'dot'`	`'square'`	Style for the three corner finder patterns.
`radius`	`number`	`0`	Border-radius in pixels applied to the QR surface itself.
`icon`	`string`	`''`	Overlay image src (use `errorLevel="H"`).
`iconSize`	`number`	`40`	Icon square size in pixels.
`iconPadding`	`number`	`4`	Padding around the icon (cuts a clean notch).
`iconShape`	`'square' \| 'rounded' \| 'circle'`	`'square'`	Icon wrapper shape.
`iconBgColor`	`string`	`'#ffffff'`	Background behind the icon.
`status`	`'active' \| 'expired' \| 'loading' \| 'scanned'`	`'active'`	Overlay state.
`expiredText`	`string`	`'QR code expired'`	Text shown when expired.
`refreshText`	`string`	`'Click to refresh'`	Refresh button label.
`scannedText`	`string`	`'QR code scanned'`	Text shown when scanned.
`loadingText`	`string`	`''`	Optional text next to the loading spinner.
`rootClass`	`ClassBinding`	`''`	Class on the root wrapper.
`codeClass`	`ClassBinding`	`''`	Class on the SVG / canvas element.
`iconClass`	`ClassBinding`	`''`	Class on the icon wrapper.
`statusClass`	`ClassBinding`	`''`	Class on the status overlay.

Events

Name	Payload	Description
`refresh`	—	Fires when the user clicks the refresh button on the expired overlay.
`render`	`{ version, size, ecLevel }`	Fires after every (re)encode.

Exposed methods

Accessible via a template ref.

Name	Signature	Description
`refresh`	`() => void`	Manually emit the refresh event.
`version`	`() => number`	Get the QR version (1–40) chosen by the encoder.
`renderToCanvas`	`(canvas: HTMLCanvasElement) => void`	Render the code into an external canvas (for download).

Slots

Name	Description
`status-loading`	Replaces the loading overlay.
`status-expired`	Replaces the expired overlay (includes the refresh button by default).
`status-scanned`	Replaces the scanned overlay.

QR Code ^0.1.23 ​

1. Basic ​

2. Any payload ​

3. Custom color & background ​

4. Size ​

5. Center icon ​

6. Error-correction level ​

7. Status overlay ​

8. Decorative styles ​

9. SVG vs canvas ​

10. Download as PNG ​

11. Non-URL payloads ​

12. Custom status slots ​

Props ​

Events ​

Exposed methods ​

Slots ​