QR Code

QRCode Image Generator

Usage

Simple Usage

preview

<template>
  <p-qrcode data="https://persona.privyid.dev" />
</template>

Sizing

Adjust QR size using prop size. Default is 200

preview

<template>
  <p-qrcode size="50" data="Hello World" />
  <p-qrcode size="100" data="Hello World" />
  <p-qrcode size="150" data="Hello World" />
</template>

Variant

There are 3 style variants: square, rounded and dots. Default value is square

preview

<template>
  <p-qrcode variant="square" data="Hello World" />
  <p-qrcode variant="rounded" data="Hello World" />
  <p-qrcode variant="dots" data="Hello World" />
</template>

Logo

preview

<template>
  <!-- From local assets -->
  <p-qrcode data="https://persona.privyid.dev" :logo="Logo" />
  <!-- From URL -->
  <p-qrcode data="https://persona.privyid.dev" logo="https://privy-open-source.github.io/design-system/assets/images/icon-privy.svg" />
</template>

<script lang="ts" setup>
import Logo from '../assets/logo.svg'
</script>

Color

preview

<template>
  <p-qrcode
    data="https://persona.privyid.dev"
    color="#0065D1" />
</template>

Background Color

preview

<template>
  <p-qrcode
    data="https://persona.privyid.dev"
    color="#3887DB"
    bg-color="#14181E" />
</template>

Binding v-model

You can binding the generated result with v-model.

preview

<template>
  <p-qrcode data="Lorem ipsum" v-model="result" />
</template>

<script lang="ts" setup>
const result = ref<File>()
</script>

result

Encode to base64

If you prefer base64-dataURI format, add modifier .base64 to your v-model.

preview

result

<template>
  <p-qrcode data="Lorem ipsum" v-model.base64="result" />
</template>

<script lang="ts" setup>
const result = ref('')
</script>

API

Props

Props	Type	Default	Description
data	Any	-	QRCode contains data
size	Number	200	QRCode image's width and height
variant	String	square	Style variant. valid value: square, rounded, dots
logo	String	-	QRCode logo url
logoSize	Number	0.8	QRCode logo size
logoMargin	Number	8	QRCode logo margin
color	String	#000000	QRCode color
bgColor	String	#FFFFFF	QRCode background color
ecc	String	M	QRCode error correction level. valid value: L, M, H, Q
typeNumber	Number	-	QRCode type number
mode	String	-	QRCode mode
options	Object	-	Extends Qr Code Styling options
modelValue	String	-	Result of generated image

Slots

Name	Description
There no slots here

Events

Name	Arguments	Description
There no props here