Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-qrcode-reader-gzonelee with all npm packages installed. Try it out:

var vueQrcodeReaderGzonelee = require("vue-qrcode-reader-gzonelee")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-qrcode-reader-gzonelee v0.0.7

A set of Vue.js components for detecting and decoding QR codes.

Logo



for Vue.js 2

npm monthly downloads

Travis CI: build status


is maintained? yes

licence: MIT

badges = awesome


uses semantic release

code style: prettier


size minified + gzipped

npm current version



documentation | live demos

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

  • :movie_camera: QrcodeStream accesses the device camera and continuously scans incoming frames.
  • :put_litter_in_its_place: QrcodeDropZone renders to an empty region where you can drag-and-drop images to be decoded.
  • :open_file_folder: 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 :chart_with_upwards_trend:

QrcodeStream

This component fundamentally depends on the Stream API.

Internet ExplorerEdgeFirefoxChromeSafari
NoYesYesYes11+
  • Chrome requires HTTPS or localhost (see Troubleshooting for help)
  • Safari also requires HTTPS even on localhost (see #48)
  • on iOS it really only works with Safari. It won't work in
    • Chrome for iOS, Firefox for iOS, ... (see #29)
    • a WebView component of your native iOS App
    • web apps added to home screen (see #76)

QrcodeDropZone and QrcodeCapture

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

Internet ExplorerEdgeFirefoxChromeSafari
10+YesYesYesYes
  • Drag-and-drop is not supported on mobile
  • Home screen web apps on iOS prior to 11.3 don't support QrcodeCapture (see this StackOverflow question)

Troubleshooting :zap:

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?

  • If your setup is Desktop Chrome + Android Chrome, use Remote Debugging which allows your Android device to access your local server as localhost.
  • Otherwise use a reverse proxy like ngrok or serveo to temporarily make your local server publicly available with HTTPS.
  • There are also loads of serverless/static hosting services that have HTTPS enabled by default and where you can deploy your web app for free. For example GitHub Pages, Google Firebase, Netlify, ...

Installation :package:

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
  },

  // ...
)

Thanks :pray:

BrowserStack Logo    Travis-CI Logo

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free