https://github.com/gera2ld/qrcanvas-vue

A QRCode component for use with Vue.js
https://github.com/gera2ld/qrcanvas-vue

Last synced: 11 months ago
JSON representation

A QRCode component for use with Vue.js

• Host: GitHub
• URL: https://github.com/gera2ld/qrcanvas-vue
• Owner: gera2ld
• License: mit
• Created: 2016-09-01T14:05:38.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2023-02-06T15:02:25.000Z (over 3 years ago)
• Last Synced: 2024-12-10T14:51:49.156Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://gera2ld.github.io/qrcanvas-vue/
• Size: 68.4 KB
• Stars: 72
• Watchers: 5
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# qrcanvas-vue

![NPM](https://img.shields.io/npm/v/qrcanvas-vue.svg)

![License](https://img.shields.io/npm/l/qrcanvas-vue.svg)

![Downloads](https://img.shields.io/npm/dt/qrcanvas-vue.svg)

This a QRCode component for use with Vue.js, based on [qrcanvas](https://github.com/gera2ld/qrcanvas).

## Usage

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

1. With bundlers:

    ``` sh

    # Installation

    $ npm i vue@next qrcanvas-vue

    ```

2. In browser:

    ```html

    

    


      

    

    ```


See [examples](https://gera2ld.github.io/qrcanvas-vue/v3/) for more usage.

### Props

* `options` is passed to [qrcanvas](https://github.com/gera2ld/qrcanvas). For more details, see [qrcanvas docs](https://github.com/gera2ld/qrcanvas/wiki).

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

    ```js

    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.