qrcode.vue

What is qrcode.vue?

qrcode.vue is a Vue.js component for generating QR codes. It provides a simple and flexible way to create QR codes in your Vue applications.

What are qrcode.vue's main functionalities?

Basic QR Code Generation

This feature allows you to generate a basic QR code by providing a value (e.g., a URL) to the `qrcode-vue` component.

<template>
  <qrcode-vue value="https://example.com" />
</template>

<script>
import QrcodeVue from 'qrcode.vue';

export default {
  components: {
    QrcodeVue
  }
};
</script>

Customizing QR Code Size

You can customize the size of the QR code by setting the `size` prop.

<template>
  <qrcode-vue value="https://example.com" :size="200" />
</template>

<script>
import QrcodeVue from 'qrcode.vue';

export default {
  components: {
    QrcodeVue
  }
};
</script>

Customizing QR Code Color

This feature allows you to customize the colors of the QR code by setting the `color` prop with `dark` and `light` values.

<template>
  <qrcode-vue value="https://example.com" :color="{ dark: '#000000', light: '#ffffff' }" />
</template>

<script>
import QrcodeVue from 'qrcode.vue';

export default {
  components: {
    QrcodeVue
  }
};
</script>

Other packages similar to qrcode.vue

vue-qrcode-reader

vue-qrcode-reader is a Vue.js component for reading QR codes from camera or file input. Unlike qrcode.vue, which focuses on generating QR codes, vue-qrcode-reader is designed for scanning and reading QR codes.

qrcode.react

qrcode.react is a QR code generator for React applications. It provides similar functionality to qrcode.vue but is designed for use with React instead of Vue.

react-qr-code

react-qr-code is another QR code generator for React applications. It offers similar features to qrcode.vue, such as customizable size and color, but is intended for React developers.

README

qrcode.vue

⚠️ Now when you are using Vue 3.x, please upgrade qrcode.vue to 3.x

🔒 if you are using Vue 2.x, please keep using version 1.x;

A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3.

中文 | 日本語

install

the qrcode.vue component can use in you Vue.js app.

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

dist/
|--- qrcode.vue.cjs.js         // CommonJS
|--- qrcode.vue.esm.js         // ES module
|--- qrcode.vue.browser.js     // UMD for browser or require.js or CommonJS
|--- qrcode.vue.browser.min.js // UMD Minimum size

Usage

e.g.

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')

Or single-file components with a *.vue extension:

<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>

When you use the component with Vue 3 with TypeScript:

<template>
  <qrcode-vue
    :value="value"
    :level="level"
    :render-as="renderAs"
    :background="background"
    :foreground='foreground'
    :image-settings='imageSettings'
  />
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import QrcodeVue from 'qrcode.vue'
  import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'

  const value = ref('qrcode')
  const level = ref<Level>('M')
  const renderAs = ref<RenderAs>('svg')
  const background = ref('#ffffff')
  const foreground = ref('#000000')
  const margin = ref(0)
  const imageSettings = ref<ImageSettings>({
    src: 'https://github.com/scopewu.png',
    width: 30,
    height: 30,
    // x: 10,
    // y: 10,
    excavate: true,
  })
</script>

Component props

value

• Type: string
• Default: ''

The value content of qrcode.

size

• Type: number
• Default: 100

The size of qrcode element.

render-as

• Type: RenderAs('canvas' | 'svg')
• Default: canvas

Generate QRcode as canvas or svg. The prop svg can work on SSR.

margin

• Type: number
• Default: 0

Define how much wide the quiet zone should be.

level

• Type: Level('L' | 'M' | 'Q' | 'H')
• Default: L

qrcode Error correction level (one of 'L', 'M', 'Q', 'H'). Know more, wikipedia: QR_code.

background

• Type: string
• Default: #ffffff

The background color of qrcode.

foreground

• Type: string
• Default: #000000

The foreground color of qrcode.

image-settings

• Type: ImageSettings

• Default: {}

  export type ImageSettings = {
    src: string, // The URL of image.
    x?: number,  // The horizontal offset. When not specified, will center the image.
    y?: number,  // The vertical offset. When not specified, will center the image.
    height: number, // The height of image
    width: number,  // The height of image
    excavate?: boolean, // Whether or not to "excavate" the modules around the image.
  }
  

The settings to support qrcode image logo.

class

• Type: string
• Default: ''

The class name of qrcode element.

License

copyright © 2021 @scopewu, license by MIT

Changelog

[3.5.0] - 2024-09-26

Feature

• Support logo image for Qrcode.
• Exports separate QrcodeCanvas and QrcodeSvg components

Direct references to QrcodeVue in common.js and cdn now require the default field:

const QrcodeVue = require('qrcode.vue').default
const { default: QrcodeVue, QrcodeCanvas, QrcodeSvg } = require('qrcode.vue')

<!--With HTML-->
<div id="root">
  <p class="flex space-x">
  <qrcode-vue :value="test" render-as="svg"></qrcode-vue>
<qrcode-canvas :value="test"></qrcode-canvas>
<qrcode-svg :value="test" :image-settings="imageSettings"></qrcode-svg>
</p>
<p><input v-model="test" /></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.5/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/qrcode.vue@3.5/dist/qrcode.vue.browser.min.js"></script>

<script>
Vue.createApp({
  data() { return {
    test: 'Hello World',
    imageSettings: {
      src: 'https://avatars.githubusercontent.com/u/15811268',
      width: 30,
      height: 30,
      excavate: true,
    },
  }},
  components: {
    QrcodeVue: QrcodeVue.default,
    QrcodeCanvas: QrcodeVue.QrcodeCanvas,
    QrcodeSvg: QrcodeVue.QrcodeSvg,
  },
}).mount('#root')
</script>