qv

qrcode-vue3

Add a style and an image to your QR code Vue3

Showing:

Popularity

Downloads/wk

116

GitHub Stars

6

Maintenance

Last Commit

3mos ago

Contributors

1

Package

Dependencies

2

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

Known Vulnerabilities

Vue3 QR Code Styling

Version

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:

Donate

Examples

Installation

npm install qrcode-vue3 --save

QR Code Scanner

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

npm install --save qrcode-reader-vue3

Usage

<template>
  <div>
  
   <QRCodeVue3
          value="Simple QR code"
        />

   <QRCodeVue3
          :width="200"
          :height="200"
          value="https://scholtz.sk"
          :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
          :imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
          :dotsOptions="{
            type: 'dots',
            color: '#26249a',
            gradient: {
              type: 'linear',
              rotation: 0,
              colorStops: [
                { offset: 0, color: '#26249a' },
                { offset: 1, color: '#26249a' },
              ],
            },
          }"
          :backgroundOptions="{ color: '#ffffff' }"
          :cornersSquareOptions="{ type: 'dot', color: '#000000' }"
          :cornersDotOptions="{ type: undefined, color: '#000000' }"
          fileExt="png"
          :download="true"
          myclass="my-qur"
          imgclass="img-qr"
          downloadButton="my-button"
          :downloadOptions="{ name: 'vqr', extension: 'png' }"
        />
  </div>
</template>

<script>
import QRCodeVue3 from "qrcode-vue3";

export default {
  name: 'QRCodeVue3Example',
  components: {
    QRCodeVue3
  },
}
</script>

API Documentation

VQRCodeStyling instance

new VQRCodeStyling(options) => VQRCodeStyling

ParamTypeDescription
optionsobjectInit object

options structure

PropertyTypeDefault ValueDescription
widthnumber300Size of canvas
heightnumber300Size of canvas
downloadbooleanfalseTo endable download button
myclassstring''Image DIV class
imgclassstring''Image class
downloadButtonstring''download button class
downloadOptionsobjectdownload option name and extension
valuestringThe date will be encoded to the QR code
imagestringThe image will be copied to the center of the QR code
marginnumber0Margin around canvas
qrOptionsobjectOptions will be passed to qrcode-generator lib
imageOptionsobjectSpecific image options, details see below
dotsOptionsobjectDots styling options
cornersSquareOptionsobjectSquare in the corners styling options
cornersDotOptionsHelperobjectDots in the corners styling options
backgroundOptionsobjectQR background styling options

options.qrOptions structure

PropertyTypeDefault Value
typeNumbernumber (0 - 40)0
modestring ('Numeric' 'Alphanumeric' 'Byte' 'Kanji')
errorCorrectionLevelstring ('L' 'M' 'Q' 'H')'Q'

options.imageOptions structure

PropertyTypeDefault ValueDescription
hideBackgroundDotsbooleantrueHide all dots covered by the image
imageSizenumber0.4Coefficient of the image size. Not recommended to use ove 0.5. Lower is better
marginnumber0Margin of the image in px
crossOriginstring('anonymous' 'use-credentials')Set "anonymous" if you want to download QR code from other origins.

options.dotsOptions structure

PropertyTypeDefault ValueDescription
colorstring'#000'Color of QR dots
gradientobjectGradient of QR dots
typestring ('rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded')'square'Style of QR dots

options.backgroundOptions structure

PropertyTypeDefault Value
colorstring'#fff'
gradientobject

options.cornersSquareOptions structure

PropertyTypeDefault ValueDescription
colorstringColor of Corners Square
gradientobjectGradient of Corners Square
typestring ('dot' 'square' 'extra-rounded')Style of Corners Square

options.cornersDotOptions structure

PropertyTypeDefault ValueDescription
colorstringColor of Corners Dot
gradientobjectGradient of Corners Dot
typestring ('dot' 'square')Style of Corners Dot

Gradient structure

options.dotsOptions.gradient

options.backgroundOptions.gradient

options.cornersSquareOptions.gradient

options.cornersDotOptions.gradient

PropertyTypeDefault ValueDescription
typestring ('linear' 'radial')"linear"Type of gradient spread
rotationnumber0Rotation of gradient in radians (Math.PI === 180 degrees)
colorStopsarray of objectsGradient 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[]

PropertyTypeDefault ValueDescription
offsetnumber (0 - 1)Position of color in gradient range
colorstringColor of stop in gradient range

VQRCodeStyling methods

VQRCodeStyling.append(container) => void

ParamTypeDescription
containerDOM elementThis container will be used for appending of the QR code

VQRCodeStyling.update(options) => void

ParamTypeDescription
optionsobjectThe same options as for initialization

VQRCodeStyling.download(downloadOptions) => void

ParamTypeDescription
downloadOptionsobjectOptions with extension and name of file (not required)

downloadOptions structure

PropertyTypeDefault ValueDescription
namestring'qr'Name of the downloaded file
extensionstring ('png' 'jpeg' 'webp')'png'File extension

if any issue check

also you can buy me a coffee @ Patreon

License

MIT License. Copyright (c) 2021 Diadal Nig

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100