qrcode.vue

Use the radius prop to round the corners of the QR code modules. The value is a ratio of the module width, ranging from 0 to 0.5.

• 0 (default): Square modules with sharp corners.
• 0.5: Maximum rounding (modules become circles).

Rounding is context-aware: inner corners between adjacent dark modules remain sharp, while outer corners are rounded.

<qrcode-vue value="test" :radius="0.35" />

When using render-as="svg" in a Server-Side Rendering (SSR) environment, you must provide a unique id prop to ensure hydration consistency between the server and the client. If omitted, the component uses a module-level counter which is not SSR-safe.

In Vue 3.5+, use the useId() hook to generate a stable ID.

<script setup>
  import { useId } from 'vue'
  const uid = useId()
</script>

<qrcode-svg value="test" :id="uid" render-as="svg" />

Install the qrcode.vue component using npm or yarn.

Note on Versions:

• Use version 3.x for Vue 3.x.
• Use version 1.x for Vue 2.x.

npm install --save qrcode.vue # yarn add qrcode.vue

You can use the QrcodeVue component in a standard Vue application by importing it and registering it in your components. For a simple implementation, pass the value prop to define the QR code content.

import { createApp } from 'vue'
import QrcodeVue from 'qrcode.vue'

createApp({
  data: {
    value: 'https://example.com',
  },
  template: '<qrcode-vue :value="value"></qrcode-vue>',
  components: {
    QrcodeVue,
  },
}).mount('#root')

In addition to the main QrcodeVue component, you can import specialized components for specific rendering modes: QrcodeCanvas for canvas rendering and QrcodeSvg for SVG rendering.

<template>
  <qrcode-vue :value="value" :size="size" level="H" render-as="svg" />
  <qrcode-canvas :value="QRCODE.VUE 😄" :size="size" level="H" />
  <qrcode-svg value="QRCODE.VUE 😄" level="H" />
</template>
<script>
  import QrcodeVue, { QrcodeCanvas, QrcodeSvg } from 'qrcode.vue'

  export default {
    data() {
      return {
        value: 'https://example.com',
        size: 300,
      }
    },
    components: {
      QrcodeVue,
      QrcodeCanvas,
      QrcodeSvg,
    },
  }
</script>

Both QrcodeSvg and QrcodeCanvas (and by extension QrcodeVue) expose methods via component refs to export the generated QR code.

• toDataURL(type?: string, quality?: number): Returns the QR code as a base64 Data URL. For canvas, type can be 'image/png'. For SVG, it returns an encoded SVG string.
• download(filename?: string): Triggers a browser download of the QR code. The default filename is qrcode.png for canvas and qrcode.svg for SVG.

<script setup>
import { ref } from 'vue'
import QrcodeVue from 'qrcode.vue'

const qrRef = ref()

const handleDownload = () => {
  qrRef.value.download('my-qr-code.png')
}

const handleDataURL = () => {
  const url = qrRef.value.toDataURL()
  console.log(url)
}
</script>

<template>
  <QrcodeVue ref="qrRef" value="https://example.com" />
  <button @click="handleDownload">Download</button>
</template>

The QrcodeVue component is the primary entry point for generating QR codes. It acts as a wrapper that renders either a <canvas> or an <svg> based on the render-as prop.

Both rendering modes support common features like error correction levels, custom colors, gradients, and embedded images.

<script setup>
import QrcodeVue from 'qrcode.vue'
</script>

<template>
  <QrcodeVue 
    value="https://example.com" 
    :size="200" 
    render-as="canvas" 
  />
</template>

To embed an image (like a logo) inside the QR code, provide an object to the image-settings prop.

ImageSettings Object Keys:

• src (string): Required. The URL or path to the image.
• x (number, optional): X position relative to the QR code.
• y (number, optional): Y position relative to the QR code.
• height (number, optional): Height of the image.
• width (number, optional): Width of the image.
• excavate (boolean, optional): If true, the QR modules behind the image are removed to create a clear space.
• borderRadius (number, optional): Corner radius for the image.
• crossOrigin ('anonymous' | 'use-credentials' | ''): CORS setting for the image.

<QrcodeVue
  value="https://example.com"
  :image-settings='{
    src: "/logo.png",
    width: 40,
    height: 40,
    excavate: true,
    borderRadius: 8
  }'
/>