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 the 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. What doesn't fit your layout can be customized.
You also get simple elegant APIs:
<qrcode-stream @decode="onDecode"></qrcode-stream>
methods: {
onDecode (decodedString) {
// ...
}
}
This component fundamentally depends on the Stream API.
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
No | Yes | Yes | Yes | 11+ |
- Chrome requires HTTPS or localhost (see #38 for help)
- Safari also requires HTTPS even on localhost (see #48)
- on iOS it only works with Safari
The newest API these components depend on is the FileReader API.
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
10+ | Yes | Yes | Yes | Yes |
- Drag-and-drop is not supported on mobile
- 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.
- Demo works but not locally: Listen for the
- 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.
npm install vue-qrcode-reader
or with Yarn:
yarn add vue-qrcode-reader
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)
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:
<link href="
vue-qrcode-reader.css" rel="stylesheet">
<script src="
vue-qrcode-reader.browser.js"></script>
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
},
// ...
)