@ispa.io/vrcode NPM

A Vue component to generate QR Code and download.

Getting started

Install

npm i @ispa.io/vrcode     // npm
yarn add @ispa.io/vrcode  //  yarn

Usage

import Vue from 'vue';
import vrcode from '@ispa.io/vrcode'

Vue.component('vrcode', vrcode);

Example

<vrcode
  :download="{
    text: 'Download',
    filename: 'file-name.png',
    visible: true, type: 'image/png'
  }"
  value="A Vue component to generate QR Code and download."
  :options="{
    size: 200,
    level: 'Q'
  }"
></vrcode>

Props

value

Type: String or Object
Default: undefined

The value of the QR code. Object type used for some helpers tool below.

download

Passing download props, to show download button, it support:

Type: Object
text - button inner text
visible - setting download button visible or not
style - setting download button style
class - setting download button class name
type - image type, such as image/png; use mime type for exactly force download
filename - file name to download

You can only download the qrcode to image by using type: canvas

type

Type: String
Default: 'canvas'

You can use canvas or svg. But SVG not support to download now.

transparent

Type: Boolean
Default: false

Transparent background for canvas and download png image. If transparent is setted, background option will not work.

Notes: If after you run npm update but the QR Code not generate transparent background, please run npm clean-install and run build again.

logo

Type: String
Default: null

Your Brand Logo URL.

opacity

Type: Number
Default: 100

Opacity of Logo, by default 100 ~ opacity: 1. We will division this number to 100 and set opacity to it.

options

Type: Object
Values:
- level
  - Type: String
  - Default: 'L'
  Possible levels are shown below: | Level | Error resistance | |------------------|:----------------:| | L (Low) | ~7% | | M (Medium) | ~15% | | Q (Quartile) | ~25% | | H (High) | ~30% |
- padding
  - Type: Number
  - Default: 10
  This is padding border of image (Because users is difficult to scan with dark mode/dark background, so we need a white padding/border)

background
- Type: String
- Default: '#fff'
foreground
- Type: String
- Default: '#000'
className
- Type: String
- Default: ''

Helpers

What are helpers?

Helpers are an easy way to create QrCodes that cause a reader to perform a certain action when scanned.

Email

This helper generates an e-mail qrcode that is able to fill in the e-mail address, subject, and body.

<vrcode
  :value="{
    address: 'email@example.com',
    subject: 'Hello',
    body: 'This is body'
  }"
  helpers="email"
></vrcode>

Call a number

This helper generates a QrCode that can be scanned and then dials a number.

<vrcode
  value="+1 98-765-43-21"
  helpers="call"
></vrcode>

SMS (Text Messages)

This helper makes SMS messages that can be prefilled with the send to address and body of the message.

<vrcode
  :value="{
    number: '+1 98-765-43-21',
    message: 'Hello, this message can be null'
  }"
  helpers="sms"
></vrcode>

Geo

This helper generates a latitude and longitude that a phone can read and opens the location in Google Maps or similar app.

<vrcode
  :value="{
    lng: 10.7800965,
    lat: 106.6854548,
    name: 'QR Guiding'
  }"
  helpers="geo"
></vrcode>

Wifi

This helpers makes scannable QrCodes that can connect a phone to a WiFI network.

<vrcode
  :value="{
    encrypt: 'WPA',
    ssid: 'Your SSID or Network Name',
    password: 'Your-Wifi-Password',
    hidden: true
  }"
  helpers="wifi"
></vrcode>

encrypt: WPA, WEP or can be null
hidden: true or false

Coin Wallet Address

This helper generates a scannable bitcoin (and other coins) to send payments.

<vrcode
  :value="{
    coin: 'ethereum',
    address: '0x0000000000000000000000000000000000000000',
    amount: 0.00,
    message: 'Hello world'
  }"
  helpers="coin"
></vrcode>

coin: default is bitcoin, you can change it by your own coin code (ethereum, bitcoincash, dash...)
coin, address, amount has required
message has not required.

Event

This helper generates a scannable event tag to add into calendar events.

<vrcode
  :value="{
    name: 'Event name',
    allDay: false,
    start: '20200702T080000Z',
    end: '20200702T2030000Z',
    location: 'Event location',
    description: 'Event descriptions'
  }"
  helpers="event"
></vrcode>

allDay: if set true => start and end has format: 20200702
start and end: timezone is UTC

meCard AND vCard

This helpers makes scannable QrCodes that add to contact list. You can use mecard or vcard. Notes that mecard has not title value.

<vrcode
  :value="{
    name: 'Your name',
    company: 'Your company name',
    phone: 'Your Phone number',
    url: 'Your Website Url',
    email: 'Your Email address',
    address: 'Your Address',
    title: 'Your Title',
    note: 'Your Notes'
  }"
  helpers="vcard"
></vrcode>