QR Code
QRCode Image Generator
Usage
Simple Usage
vue
<template>
<p-qrcode data="https://persona.privyid.dev" />
</template>
Sizing
Adjust QR size using prop size
. Default is 200
vue
<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
vue
<template>
<p-qrcode variant="square" data="Hello World" />
<p-qrcode variant="rounded" data="Hello World" />
<p-qrcode variant="dots" data="Hello World" />
</template>
Logo
vue
<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
vue
<template>
<p-qrcode
data="https://persona.privyid.dev"
color="#0065D1" />
</template>
Background Color
vue
<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
.
vue
<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
.
result
data:image/png;base64,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
vue
<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 |