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

A Vue.js component to generate QRCode.

中文

install

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

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

Usage

e.g.

import Vue from 'vue'
import QrcodeVue from 'qrcode.vue'

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

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

<template>
  <div>
    <qrcode-vue :value="value" :size="size" level="H"></qrcode-vue>
  </div>
</template>
<script>
  import QrcodeVue from 'qrcode.vue'

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

Component props

value

• Type: string
• Default: ''

The value content of qrcode

level

• Type: string
• Default: L

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

size

• Type: number
• Default: 100

The size of qrcode element.

renderAs

• Type: string
• Default: canvas

Generate QRcode as canvas or svg.

background

• Type: string
• Default: #ffffff

The background color of qrcode.

foreground

• Type: string
• Default: #000000

The foreground color of qrcode.

class || className

• Type: string
• Default: ''

The class name of qrcode element.

License

copyright © 2017 @scopewu, license by MIT

Changelog

[1.7.0] - 2019-11-10

Feature

• Support generate Qrcode as svg.