Characteristic QR Code Generator For Vue.js

Characteristic QR Code Generator For Vue.js

Yet another Vue.js QR code generator to render characteristic QR codes using canvas. Based on qrcanvas.

qrcanvas-vue

NPM License Downloads

This a QRCode component for use with Vue.js, based on qrcanvas.

Usage

  1. With bundlers:

    # Installation
    $ yarn add qrcanvas-vue
    
    <template>
      <QRCanvas :options="options" @updated="onUpdated" />
    </template>
    
    <script>
    import { QRCanvas } from 'qrcanvas-vue';
    
    export default {
      components: {
        QRCanvas,
      },
      data() {
        return {
          options: {
            data: 'hello',
          },
        };
      },
      methods: {
        onUpdated() {
          console.log('updated');
        },
      },
    };
    </script>
    
  2. In browser:

    <script src="https://unpkg.com/qrcanvas"></script>
    <script src="https://unpkg.com/qrcanvas-vue"></script>
    <div id="root">
      <qr-canvas :options="options" @updated="onUpdated"></qr-canvas>
    </div>
    
    const { QRCanvas: QrCanvas } = qrcanvas.vue;
    
    new Vue({
      components: {
        QrCanvas, // QrCanvas <-> qr-canvas
      },
      data: {
        options: {
          data: 'hello',
        },
      },
      methods: {
        onUpdated() {
          console.log('updated');
        },
      },
    })
    .$mount('#root');
    

Props

  • options is passed to qrcanvas. For more details, see qrcanvas docs.

  • Be sure to pass a new options object if data is updated:

    this.options = Object.assign({}, this.options, {
      data: 'new data',
    });
    

Events

  • beforeUpdate

    Fired before the canvas is updated. The only parameter is the canvas.

  • updated

    Fired after the canvas is updated. The only parameter is the canvas.

See more examples.

Trouble Shooting

  • If you have trouble with Vue.extend, try using the component data directly:

    import { Component as QRCanvas } from 'qrcanvas-vue/lib/qrcanvas-vue.component.js';
    

Github Repository

Tags: #VueJs