vue-qrcode-reader

vue-qrcode-reader

A Vue.js component, accessing the device camera and allowing users to read QR-Codes, within the browser

Table of contents

• Installation
• Usage
• Example

Installation

npm install --save vue-qrcode-reader

Default import

Install all the components:

import Vue from 'vue'
import VueQrcodeReader from 'vue-qrcode-reader'

Vue.use(VueQrcodeReader)

Use specific components:

import Vue from 'vue'
import { QrcodeReader } from 'vue-qrcode-reader'

Vue.component('qrcode-reader', QrcodeReader)

⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

Distribution import

Install all the components:

import 'vue-qrcode-reader/dist/vue-qrcode-reader.css'
import VueQrcodeReader from 'vue-qrcode-reader/dist/vue-qrcode-reader.common'

Vue.use(VueQrcodeReader)

Use specific components:

import 'vue-qrcode-reader/dist/vue-qrcode-reader.css'
import { Test } from 'vue-qrcode-reader/dist/vue-qrcode-reader.common'

Vue.component('test', Test)

⚠️ You may have to setup your bundler to embed the css file in your page.

Browser

<link rel="stylesheet" href="vue-qrcode-reader/dist/vue-qrcode-reader.css"/>

<script src="vue.js"></script>
<script src="vue-qrcode-reader/dist/vue-qrcode-reader.browser.js"></script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Install all the components:

Vue.use(VueQrcodeReader)

Use specific components:

Vue.component('qrcode-reader', VueQrcodeReader.QrcodeReader)

Source import

Install all the components:

import Vue from 'vue'
import VueQrcodeReader from 'vue-qrcode-reader/src'

Vue.use(VueQrcodeReader)

Use specific components:

import Vue from 'vue'
import { QrcodeReader } from 'vue-qrcode-reader/src'

Vue.component('qrcode-reader', QrcodeReader)

⚠️ You need to configure your bundler to compile .vue files. More info in the official documentation.

Usage

TODO

Example

TODO

---

License

MIT