# vrcode

> A Vue component to generate QR Code and download.

Latest version **1.2.7-readme** (published 2020-06-27) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vrcode
pnpm add vrcode
yarn add vrcode
bun add vrcode
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.2.7-readme |
| Published | 2020-06-27 |
| First published | 2020-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 47.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Malayvuong |
| Maintainers | malayvuong |
| Keywords | vuejs, qrcode, vrcode, download |

## Links

- npm: https://www.npmjs.com/package/vrcode
- Repository: https://github.com/malayvuong/vrcode
- Homepage: https://github.com/malayvuong/vrcode#readme
- Issues: https://github.com/malayvuong/vrcode/issues
- npm.io page: https://npm.io/package/vrcode

## Dependencies (1)

- [qr.js](https://npm.io/package/qr.js.md) ^0.0.0

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 1.2.7-readme (latest) — 2020-06-27
- 1.2.7 — 2020-06-27
- 1.2.6 — 2020-06-27
- 1.2.2 — 2020-06-27
- 1.2.1 — 2020-06-27
- 1.1.8 — 2020-06-27
- 1.1.7 — 2020-06-27
- 1.1.6-readme — 2020-06-27
- 1.1.6 — 2020-06-26
- 1.1.5 — 2020-06-26
- 1.1.4 — 2020-06-26
- 1.0.1 — 2020-06-26
- 1.0.0 — 2020-06-26

## README

<h1 align="center">vrcode (Vue QR Code)</h1>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@ispa.io/vrcode" target="_blank" rel="noopener noreferrer"><img src="https://flat.badgen.net/bundlephobia/minzip/@ispa.io/vrcode" alt="Minified + gzip package size for vrcode in KB" class="badge--in-table"></a>
  <a href="https://circleci.com/gh/malayvuong/vrcode/tree/dev"><img src="https://img.shields.io/circleci/project/github/malayvuong/vrcode/dev.svg?sanitize=true" alt="Build Status"></a>
  <a href="https://npmcharts.com/compare/@ispa.io/vrcode?minimal=true"><img src="https://img.shields.io/npm/dm/@ispa.io/vrcode.svg?sanitize=true" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@ispa.io/vrcode"><img src="https://img.shields.io/npm/v/@ispa.io/vrcode.svg?sanitize=true" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@ispa.io/vrcode"><img src="https://img.shields.io/npm/l/@ispa.io/vrcode.svg?sanitize=true" alt="License"></a>
  <a href="https://m.me/malayvuong"><img src="https://img.shields.io/badge/chat-messenger-green" alt="Chat"></a>
</p>

A Vue component to generate QR Code and download.

![img](./assets/screenshot.png)

## Table of contents

- [Getting started](#getting-started)
- [Props](#props)
- [Milestone](#milestone)
- [Versioning](#versioning)
- [License](#license)

## Getting started

### Install
```shell
npm i @ispa.io/vrcode
```

### Usage
```js
import Vue from 'vue';

Vue.component('vrcode', require('vrcode').default);

```
### Example
```html
<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`
- Default: `undefined`

The value of the QR code.

### 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.

### 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 an white padding/border)**


  - `background`

    - Type: `String`
    - Default: `'#fff'`

  - `foreground`

    - Type: `String`
    - Default: `'#000'`

  - `className`

    - Type: `String`
    - Default: `''`

## Milestone

- Transparent background
- PNG transparent background download
- With centered logo

## Versioning

Maintained under the [Semantic Versioning guidelines](https://semver.org/).

## License

[MIT](https://opensource.org/licenses/MIT) © [Malayvuong](https://malayvuong.com/)

[⬆ back to top](#table-of-contents)

---
_Source: https://npm.io/package/vrcode · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._