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

"[object File]"

Encode to base64

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

preview

result

data:image/png;base64,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

<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