npmpackage.info

Gathering detailed insights and metrics for qrcode-vue3

Other packages similar to qrcode-vue3

@chenfengyuan/vue-qrcode

2.0.0

QR code component for Vue 3.

vue3-next-qrcode

3.1.0

<p align="center"> <a href="https://github.com/XiaoDaiGua-Ray/vue3-next-qrcode"> <img width="216" src="https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:alist/ray/ray.svg?sign=ZklU9Bh5b6oKp1X0LOhGwkx4g5mW4wk_w9Jt5zlZ5EQ=:0"> </a> </

qrcode-reader-vue3

3.1.4

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

vue3-qrcode

0.0.2

## Demo

Gathering detailed insights and metrics for qrcode-vue3

qrcode-vue3 - 1.7.1 | npmpackage.info

qrcode-vue3

1.7.1

MIT

TypeScript

961.34 kB

2.8

Installations

npm install qrcode-vue3

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

20.15.1

NPM Version

10.8.3 Pull Requests

Open

0

Total

10

Closed

3

Merged

7

Issues

Open

32

Total

44

Closed

12

Releases

Unable to fetch releases

Languages

TypeScript

JavaScript

Vue

TypeScript (80.25%)

JavaScript (11.94%)

Vue (7.81%)

Developer

scholtz

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

98 Stars

60 Commits

34 Forks

3 Watchers

2 Branches

1 Contributors

Updated on Jul 08, 2025

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

1.7.1

Package Id

qrcode-vue3@1.7.1

Unpacked Size

961.34 kB

Size

455.80 kB

File Count

NPM Version

10.8.3

Node Version

20.15.1

Published on

Sep 07, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Vue3 QR Code Styling

DEMO

Vite.JS DEMO

Quasar DEMO

Description

JavaScript library for generating QR codes with a logo and styling.

this clone copy of https://qr-code-styling.com

If you have issues / suggestions / notes / questions, please open an issue or contact me. Let's create a cool library together.

Support this project

Please donate algorand to support this project:

Examples

Installation

npm install qrcode-vue3 --save

QR Code Scanner

If you are looking for QR code reader, see qrcode-reader-vue3 project

1npm install --save qrcode-reader-vue3

Usage

1<template>
2  <div>
3
4   <QRCodeVue3
5          value="Simple QR code"
6        />
7
8   <QRCodeVue3
9          :width="200"
10          :height="200"
11          value="https://scholtz.sk"
12          :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
13          :imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
14          :dotsOptions="{
15            type: 'dots',
16            color: '#26249a',
17            gradient: {
18              type: 'linear',
19              rotation: 0,
20              colorStops: [
21                { offset: 0, color: '#26249a' },
22                { offset: 1, color: '#26249a' },
23              ],
24            },
25          }"
26          :backgroundOptions="{ color: '#ffffff' }"
27          :cornersSquareOptions="{ type: 'dot', color: '#000000' }"
28          :cornersDotOptions="{ type: undefined, color: '#000000' }"
29          fileExt="png"
30          :download="true"
31          myclass="my-qur"
32          imgclass="img-qr"
33          downloadButton="my-button"
34          :downloadOptions="{ name: 'vqr', extension: 'png' }"
35        />
36  </div>
37</template>
38
39<script>
40import QRCodeVue3 from "qrcode-vue3";
41
42export default {
43  name: 'QRCodeVue3Example',
44  components: {
45    QRCodeVue3
46  },
47}
48</script>

API Documentation

VQRCodeStyling instance

new VQRCodeStyling(options) => VQRCodeStyling

Param	Type	Description
options	object	Init object

options structure

Property	Type	Default Value	Description
width	number	`300`	Size of canvas
height	number	`300`	Size of canvas
download	boolean	false	To endable download button
myclass	string	''	Image DIV class
imgclass	string	''	Image class
downloadButton	string	''	download button class
downloadOptions	object		download option name and extension
value	string		The date will be encoded to the QR code
image	string		The image will be copied to the center of the QR code
margin	number	`0`	Margin around canvas
qrOptions	object		Options will be passed to `qrcode-generator` lib
imageOptions	object		Specific image options, details see below
dotsOptions	object		Dots styling options
cornersSquareOptions	object		Square in the corners styling options
cornersDotOptionsHelper	object		Dots in the corners styling options
backgroundOptions	object		QR background styling options

options.qrOptions structure

Property	Type	Default Value
typeNumber	number (`0 - 40`)	`0`
mode	string (`'Numeric' 'Alphanumeric' 'Byte' 'Kanji'`)
errorCorrectionLevel	string (`'L' 'M' 'Q' 'H'`)	`'Q'`

options.imageOptions structure

Property	Type	Default Value	Description
hideBackgroundDots	boolean	`true`	Hide all dots covered by the image
imageSize	number	`0.4`	Coefficient of the image size. Not recommended to use ove 0.5. Lower is better
margin	number	`0`	Margin of the image in px
crossOrigin	string(`'anonymous' 'use-credentials'`)		Set "anonymous" if you want to download QR code from other origins.

options.dotsOptions structure

Property	Type	Default Value	Description
color	string	`'#000'`	Color of QR dots
gradient	object		Gradient of QR dots
type	string (`'rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded'`)	`'square'`	Style of QR dots

options.backgroundOptions structure

Property	Type	Default Value
color	string	`'#fff'`
gradient	object

options.cornersSquareOptions structure

Property	Type	Description
color	string	Color of Corners Square
gradient	object	Gradient of Corners Square
type	string (`'dot' 'square' 'extra-rounded'`)	Style of Corners Square

options.cornersDotOptions structure

Property	Type	Description
color	string	Color of Corners Dot
gradient	object	Gradient of Corners Dot
type	string (`'dot' 'square'`)	Style of Corners Dot

Gradient structure

options.dotsOptions.gradient

options.backgroundOptions.gradient

options.cornersSquareOptions.gradient

options.cornersDotOptions.gradient

Property	Type	Default Value	Description
type	string (`'linear' 'radial'`)	"linear"	Type of gradient spread
rotation	number	0	Rotation of gradient in radians (Math.PI === 180 degrees)
colorStops	array of objects		Gradient colors. Example `[{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]`

Gradient colorStops structure

options.dotsOptions.gradient.colorStops[]

options.backgroundOptions.gradient.colorStops[]

options.cornersSquareOptions.gradient.colorStops[]

options.cornersDotOptions.gradient.colorStops[]

Property	Type	Default Value	Description
offset	number (`0 - 1`)		Position of color in gradient range
color	string		Color of stop in gradient range

VQRCodeStyling methods

VQRCodeStyling.append(container) => void

Param	Type	Description
container	DOM element	This container will be used for appending of the QR code

VQRCodeStyling.update(options) => void

Param	Type	Description
options	object	The same options as for initialization

VQRCodeStyling.download(downloadOptions) => void

Param	Type	Description
downloadOptions	object	Options with extension and name of file (not required)

downloadOptions structure

Property	Type	Default Value	Description
name	string	`'qr'`	Name of the downloaded file
extension	string (`'png' 'jpeg' 'webp'`)	`'png'`	File extension

if any issue check

also you can buy me a coffee @ Patreon

License

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.

3

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

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.8

/10

Last Scanned on 2025-07-07

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-vue3

Other packages similar to qrcode-vue3

qrcode-vue3

Installations

Developer Guide

Yes

ESM

20.15.1

10.8.3

Pull Requests

0

10

3

7

Issues

32

44

12

Releases

Unable to fetch releases

Languages

Developer

scholtz

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

Vue3 QR Code Styling

DEMO

Vite.JS DEMO

Quasar DEMO

Description

Support this project

Examples

Installation

QR Code Scanner

Usage

API Documentation

VQRCodeStyling instance

VQRCodeStyling methods

License

10

10

10

3

0

0

0

0

0

0

0

0

0

2.8

/10