Components

QRCode

A flexible QR code component with support for styling, images, and loading states.

Component

View code

Show playground

Props

Props	Required	Default	Type
`renderAs`	—	`canvas`	`QRRenderAs`
`modelValue`	`true`	—	`string`
`size`	—	`250`	`number`
`level`	—	`M`	`QRLevel`
`background`	—	`#ffffff`	`string`
`foreground`	—	`#000000`	`string`
`gradient`	—	`false`	`boolean`
`gradientType`	—	`linear`	`QRGradientType`
`gradientStartColor`	—	`#ffffff`	`string`
`gradientEndColor`	—	`#000000`	`string`
`imageMargin`	—	—	`number`
`hasBorder`	—	`true`	`boolean`
`hasMiddleImage`	—	`false`	`boolean`
`imageSettings`	—	—	`ImageSettings`
`isLoading`	—	`false`	`boolean`
`containerClass`	—	—	`string`

Usage

renderAs

The renderAs prop determines how the QR code is rendered. It uses the QRRenderAs enum to determine the type of rendering.

 <template>
    <QR image :renderAs="QRRenderAs.CANVAS" />
</template>

Type: QRRenderAs
Default: QRRenderAs.CANVAS

Options

Value	Description
`CANVAS`	Uses a canvas element to render the QR code.
`SVG`	Uses a SVG tag to render the QR code.

modelValue

The modelValue prop is used to set the value of the QR code.

 <template>
    <QRCode v-model="" />
</template>

Type: string
Required: true

size

The size prop determines the size of the QR code.

 <template>
    <QRCode :size="100" />
</template>

Type: number
Default: 250

level

The level prop determines the error correction level of the QR code. It uses the QRLevel enum.

 <template>
    <QRCode :level="QRLevel.M" />
</template>

Type: QRLevel
Default: QRLevel.M

Options

Value	Description
`L`	Low error correction level.
`M`	Medium error correction level.
`Q`	Quartile error correction level.
`H`	High error correction level.

background

The background prop determines the background color of the QR code.

 <template>
    <QRCode background="#000000" />
</template>

Type: string
Default: #ffffff

foreground

The foreground prop determines the foreground color of the QR code.

 <template>
    <QRCode foreground="#ffffff" />
</template>

Type: string
Default: #000000

useGradient

The useGradient prop determines whether to use a gradient for the QR code.

 <template>
    <QRCode useGradient />
</template>

Type: boolean
Default: false

gradientType

The gradientType prop determines the type of gradient to use. It uses the QRGradientType enum.

 <template>
    <QRCode :gradientType="QRGradientType.RADIAL" />
</template>

Type: QRGradientType
Default: QRGradientType.LINEAR

Options

Value	Description
`linear`	Linear gradient.
`radial`	Radial gradient.

gradientStartColor

The gradientStartColor prop determines the start color of the gradient.

 <template>
    <QRCode gradientStartColor="#000000" />
</template>

Type: string
Default: #ffffff

gradientEndColor

The gradientEndColor prop determines the end color of the gradient.

 <template>
    <QRCode gradientEndColor="#ffffff" />
</template>

Type: string
Default: #000000

imageMargin

The imageMargin prop determines the margin of the image.

 <template>
    <QRCode :imageMargin="10" />
</template>

Type: number
Default: 0

hasBorder

The hasBorder prop determines whether to draw a border around the QR code.

Important

In order to be visible, some margin has to be applied.

 <template>
    <QRCode :hasBorder="false" />
</template>

Type: boolean
Default: true

hasMiddleImage

The hasMiddleImage prop determines whether to draw a middle image.

 <template>
    <QRCode :hasMiddleImage="false" />
</template>

Type: boolean
Default: false

imageSettings

The imageSettings prop is an object that contains the settings for the middle image.

 <template>
    <QRCode :imageSettings="{
        src: 'https://example.com/image.png',
        width: 100,
        height: 100,
    }" />
</template>

Type: ImageSettings

isLoading

The isLoading prop determines whether the QR code is loading.

 <template>
    <QRCode :isLoading="true" />
</template>

Type: boolean
Default: false

containerClass

The containerClass prop is a string that determines the class of the container.

 <template>
    <QRCode :containerClass="myClass" />
</template>

Type: string