npmpackage.info

qrcode-reader-vue3

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

3.1.2

MIT

JavaScript

148.20 kB

101,409 2.5

Installations

npm install qrcode-reader-vue3

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

10.24.1

NPM Version

6.14.12 Score

62.3

Supply Chain

97.8

Quality

75.2

Maintenance

100

Vulnerability

98.9

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

3

Total

3

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 1 contributors

Languages

JavaScript

Vue

JavaScript (53.92%)

Vue (46.08%)

Developer

scholtz

Download Statistics

Total Downloads

101,409

Last Day

Last Week

392

Last Month

1,907

Last Year

30,045

GitHub Statistics

21 Stars

299 Commits

6 Forks

2 Watching

13 Branches

1 Contributors

Bundle Size

441.02 kB

Minified

148.20 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

3.1.2

Package Id

qrcode-reader-vue3@3.1.2

Unpacked Size

5.06 MB

Size

1.95 MB

File Count

NPM Version

6.14.12

Node Version

10.24.1

Total Downloads

Cumulative downloads

Total Downloads

101,409

Last day

-45.6%

Compared to previous day

Last week

-25.8%

392

Compared to previous week

Last month

-4.4%

1,907

Compared to previous month

Last year

-22.9%

30,045

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Donate

live demos | api reference

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:

1<qrcode-stream @decode="onDecode"></qrcode-stream>

1methods: {
2  onDecode (decodedString) {
3    // ...
4  }
5}

Support this project

Please donate algorand to support this project:

Sample production use

qrcode reader vue3 is used for example in this production environment: Algorand Wallet - https://github.com/scholtz/wallet/blob/master/src/pages/Pay.vue

Screenshots

Screenshot 1 Screenshot 2 Screenshot 3

Installation :package:

With NPM

Run

1npm install --save qrcode-reader-vue3

If you are looking for QR Code generator, see qrcode-vue3 project

1npm install --save qrcode-vue3

You can import the components independantly

1import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'qrcode-reader-vue3'
2
3const MyComponent = {
4
5  components: {
6    QrcodeStream,
7    QrcodeDropZone,
8    QrcodeCapture
9  },
10
11  // ...
12))

or register all of them globally right away

1import Vue from "vue";
2import QrcodeReaderVue3 from "qrcode-reader-vue3";
3
4Vue.use(QrcodeReaderVue3);

Without NPM

Include the following JS file:

https://unpkg.com/qrcode-reader-vue3/dist/QrcodeReaderVue3.umd.min.js

Make sure to include it after Vue:

1<script src="./vue.js"></script>
2<script src="./QrcodeReaderVue3.umd.min.js"></script>

All components are automatically registered globally. Use kebab-case to reference them in your templates:

1<qrcode-stream></qrcode-stream>
2<qrcode-drop-zone></qrcode-drop-zone>
3<qrcode-capture></qrcode-capture>

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.
- The demo works but it doesn't work in my project: Listen for the init event to investigate errors.
- The 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 (e.g. GitHub Pages, GitLab Pages, Google Firebase, Netlify, Heroku, ZEIT Now, ...)

Some of my QR codes are not being detected.

Make sure, there is some white border around the QR code.
Color inverted QR codes are not supported (dark background, light foreground).
Model 1 QR codes are also not supported.

Thanks :pray:

https://github.com/gruhn/vue-qrcode-reader Original QR code reader (vue2 support)

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

SAST

Determines if the project uses static code analysis.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

82 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-2h3h-q99f-3fhc
Warn: Project is vulnerable to: GHSA-gmw6-94gg-2rc2
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-hj9c-8jmm-8c52
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-x2pg-mjhr-2m5x
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

2.5

/10

Last Scanned on 2025-01-20

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to qrcode-reader-vue3

vue3-qrcode-reader

0.0.1

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

vue3-barcode-qrcode-reader

1.0.16

Vue 3 barcodes and QR codes scanner

@teckel/vue-barcode-reader

1.1.8

Vue 3 Barcodes and QR Codes Scanner

vue-qrcode-reader-vue3

0.0.0-development

感谢作者

qrcode-reader-vue3

Installations

Developer Guide

No

CommonJS

10.24.1

6.14.12

Score

Pull Requests

0

0

0

Issues

3

3

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

scholtz

Download Statistics

GitHub Statistics

Bundle Size

441.02 kB

148.20 kB

Maintainers

Package Meta Information

Total Downloads

101,409

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

Support this project

Sample production use

Screenshots

Installation :package:

With NPM

Without NPM

Troubleshooting :zap:

I don't see the camera when using QrcodeStream.

I'm running a dev server on localhost. How to test on my mobile device without HTTPS?

Some of my QR codes are not being detected.

Thanks :pray:

10

10

10

0

0

0

0

0

0

0

0

0

0

2.5

/10

Other packages similar to qrcode-reader-vue3

I don't see the camera when using `QrcodeStream`.