QRCode Component for Vue.js


Grab this QRCode Component, to generate your own unique codes. Options like level, value, background color, and mime are available, so customization and integration is easy. You can find more information on QRCodes and the use of these, here.


npm i v-qrcode --save


import Qrcode from 'v-qrcode/src/index'

export default {
  data () {
      return {
          qrCls: 'qrcode',
          qrText: 'Read VueJS Feed daily',
          size: 500,
          background: '#E91E63'
  components: {

Add options like value, the string to generate QR Code and cls the classname of wrapper, to create your own QRCode.

  <div id="app">
    <h1>QRCodes for Vue</h1>
     <qrcode :background="background" :size="size" :cls="qrCls" :value="qrText"></qrcode>

Bind to the options you 've set.

Take a look how it works in this demo.

Check GitHub for more options.