Skip to content
A set of Vue.js components for detecting and decoding QR codes.
Branch: master
Clone or download
gruhn docs: promote BrowserStack
To qualify for the BrowserStack Open Source program.

See #84
Latest commit 6b165bc Mar 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
config
src feat(QrcodeDropZone): `dragover` event Feb 11, 2019
test Scaffold unit/e2e test environment Oct 16, 2017
.babelrc
.editorconfig
.eslintignore
.eslintrc.js scaffolded new Vue.js project, using @Akryum's share-components template Aug 19, 2017
.gitignore build: remove package-lock.json Dec 13, 2018
.npmignore build: setup travis CI Aug 23, 2018
.travis.yml build: setup semantic release Aug 23, 2018
LICENSE Initial commit Aug 18, 2017
README.md
index.js
package.json
yarn.lock fix(camera-prop): unneccesary new stream requests Dec 13, 2018

README.md

Logo

for Vue.js 2 npm monthly downloads Travis CI: build status
is maintained? yes licence: MIT badges = awesome
size minified + gzipped npm current version
uses semantic release

documentation | live demos

A set of Vue.js components, allowing you to detect and decode QR codes, without leaving the browser.

  • 🎥 QrcodeStream accesses the device camera and continuously scans incoming frames.
  • 🚮 QrcodeDropZone renders to an empty region where you can drag-and-drop images to be decoded.
  • 📂 QrcodeCapture is a classic file upload field, instantly scanning all files you select.

All components are responsive. Beyond that, close to zero styling. Make them fit your layout. Usage is simple and straight forward:

<qrcode-stream @decode="onDecode"></qrcode-stream>
methods: {
  onDecode (decodedString) {
    // ...
  }
}

Screenshots

Screenshot 1 Screenshot 2 Screenshot 3

Browser support

QrcodeStream

This component fundamentally depends on the Stream API.

Internet Explorer Edge Firefox Chrome Safari
No Yes Yes Yes 11+
  • Chrome requires HTTPS or localhost (see Troubleshooting for help)
  • Safari also requires HTTPS even on localhost (see #48)
  • on iOS it only works with Safari
    • Chrome for iOS, Firefox for iOS and so on are not supported (see #29)
    • even web apps added to home screen are not supported (see #76)

QrcodeDropZone and QrcodeCapture

The newest API these components depend on is the FileReader API.

Internet Explorer Edge Firefox Chrome Safari
10+ Yes Yes Yes Yes
  • Drag-and-drop is not supported on mobile

Troubleshooting

  • I don't see the camera when using QrcodeStream.
    • Check if it works on the demo page. Especially the Decode All demo, since it renders error messages. If you see errors, consult the docs to understand their meaning.
      • Demo works but not locally: Listen for the init event to investigate errors.
      • Demo doesn't work: Carefully review the Browser Support section above. Maybe your device is just not supported.
  • I'm running a dev server on localhost. How to test on my mobile device without HTTPS?

Installation

npm install vue-qrcode-reader

or with Yarn:

yarn add vue-qrcode-reader

Default import

You can either import the components independantly and register them in another components scope:

import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'

Vue.component('my-component', {
  components: {
    QrcodeStream,
    QrcodeDropZone,
    QrcodeCapture
  },

  // ...
))

Or alternatively register all of them globally right away:

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

Vue.use(VueQrcodeReader)

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

Browser

All the examples on the demo page utilize single-file components. To use them in your project you need a build tool like webpack. Check out this fiddle for a simpler example you can use right in the browser.

Besides Vue you need to include the following CSS and JS file:

The global variable window.VueQrcodeReader should now be available.

All components should be automatically registered globally. If not, you can do it like this:

Vue.use(VueQrcodeReader)

You can also register specific components locally, in one of your components:

Vue.component('my-component', {
  components: {
    'qrcode-stream': VueQrcodeReader.QrcodeStream,
    'qrcode-drop-zone': VueQrcodeReader.QrcodeDropZone,
    'qrcode-capture': VueQrcodeReader.QrcodeCapture
  },

  // ...
)

Acknowledgements

Tested with

BrowserStack Logo
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.