Vue

Implementation of the Qr grid library for Vue applications.

Installation

npm

npm install @qrgrid/vue

bun

bun add @qrgrid/vue

pnpm

pnpm install @qrgrid/vue

yarn

yarn add @qrgrid/vue

Using Canvas

<script>
  import { Qr } from "@qrgrid/vue/canvas";
</script>

<template>
  <Qr input="Hello World!" />
</template>

OR

<script>
  import { Canvas } from "@qrgrid/vue";
</script>

<template>
  <Canvas input="Hello World!" />
</template>

Props

Prop	Type	Description	Default
input	string	Data to encode
qrOptions?	QrOptions	Options for QR encoding
image?	QrImageOption	Image options for the image in QR code	sizePercent: 15 opacity: 1 overlap: true border: false
size?	number	Canvas size	400
watchKey?	string | number	Key to watch for regenerating the QR code (besides input, size,qrOptions and image).
bgColor?	QrColor | ((ctx: CanvasRenderingContext2D) => QrColor)	Background color	black
color?	QrColor | ((ctx: CanvasRenderingContext2D) => QrColor)	QR code color	white
moduleStyle?	ModuleStyleFunction	Custom styles for QR modules
getQrData?	(qr: QR) => void;	Retrieve QR data
getCanvasCtx?	(ctx: CanvasRenderingContext2D) => void;	Retrieve canvas context
onGenerated?	(ctx: CanvasRenderingContext2D, size: number, qr: QR) => void;	Callback once QR code is generated

see the props in code.

Using Svg

<script>
  import { Qr } from "@qrgrid/vue/svg";
</script>

<template>
  <Qr input="Hello World!"/>
</template>

OR

<script>
  import { Svg } from "@qrgrid/vue";
</script>

<template>
  <Svg input="Hello World!" />
</template>

Props

Prop	Type	Description	Default
input	string	Data to encode
qrOptions?	QrOptions	Qr Options for QR encoding
image?	QrImageOption	Image options for image in the QR code	sizePercent: 15 opacity: 1 overlap: true border: false
size?	number	SVG size	400
watchKey?	string | number	Key to watch for regenerating the QR code (besides input, size, qrOptions and image).
bgColor?	string	Background color	black
color?	string | { codeword?: string; finder?: string }	QR code color	white
moduleStyle?	ModuleStyleFunction	Custom styles for QR modules
getQrData?	(qr: QR) => void;	get Qr data
onGenerated?	(path: ModuleStyleFunctionParams[0], size: number, qr: QR) => void;	Callback once QR code is generated

see the props in code.

Examples

Explore Styles for custom styling and other utilities

• Basic

  <Qr input="Hello World!" />

• ErrorCorrection

  <Qr input="Hello World!" :qrOptions="{errorCorrection: 'H'}" />

• Color

  <Qr input="Hello World!" bgColor="#F8EDED" color="#173B45" />

• Module Style from @qrgrid/styles

  <script>
    import { dotModuleStyle } from "@qrgrid/styles/canvas/styles";
  </script>
  
  <template>
    <Qr input="Hello World!" :moduleStyle="dotModuleStyle" />
  </template>

  <script>
    import { smoothModuleStyle } from "@qrgrid/styles/canvas/styles";
  </script>
  
  <template>
    <Qr input="Hello World!" :moduleStyle="smoothModuleStyle" />
  </template>

• Images

  <Qr input="Hello World!" :image="{ src: './vite.svg' }" />

  <Qr input="Hello World!" :image="{ src: './vite.svg', overlap: false }" />

• Downloading using @qrgrid/styles

  Canvas

  <script>
    import { Qr } from "@qrgrid/vue/canvas";
    import { downloadQr} from "@qrgrid/styles/canvas/utils";
  
    const qrRef = ref<InstanceType<typeof Qr> | null>(null);
  
    const download = () => {
      if (qrRef.value?.canvasRef) {
        downloadQr(qrRef.value?.canvasRef);
      }
    };
  </script>
  
  <template>
    <Qr input="Hello World!" ref="qrRef" />
  </template>

  Svg

  <script>
    import { Qr } from "@qrgrid/vue/svg";
    import { downloadQr} from "@qrgrid/styles/svg/utils";
  
    const qrRef = ref<InstanceType<typeof Qr> | null>(null);
  
    const download = () => {
      if (qrRef.value?.svgRef) {
        downloadQr(qrRef.value?.svgRef);
      }
    };
  </script>
  
  <template>
    <Qr input="Hello World!" ref="qrRef" />
  </template>

For more examples and customization options, see the examples.