gera2ld / qrcanvas-vue

A QRCode component for use with Vue.js

qrcanvas-vue

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

Usage

Note: qrcanvas-vue@2 works with vue@2, qrcanvas-vue@3 works with vue@3.

1. With bundlers:

   # Installation
   $ npm i vue@next qrcanvas-vue

2. In browser:

   <script src="https://cdn.jsdelivr.net/combine/npm/qrcanvas@3,npm/qrcanvas-vue@3"></script>
   <div id="root">
     <qr-canvas :options="options" @updated="onUpdated"></qr-canvas>
   </div>

See examples for more usage.

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.