# @chenfengyuan/vue-qrcode

> QR code component for Vue 3.

Latest version **2.0.0** (published 2022-02-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @chenfengyuan/vue-qrcode
pnpm add @chenfengyuan/vue-qrcode
yarn add @chenfengyuan/vue-qrcode
bun add @chenfengyuan/vue-qrcode
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2022-02-07 |
| First published | 2018-10-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1103 |
| Author | Chen Fengyuan |
| Maintainers | chenfengyuan |
| Keywords | qrcode, qr-code, 2d-bar-code, vue, vue3, vue-component, front-end, web |

## Links

- npm: https://www.npmjs.com/package/@chenfengyuan/vue-qrcode
- Repository: https://github.com/fengyuanchen/vue-qrcode
- Homepage: https://fengyuanchen.github.io/vue-qrcode
- Issues: https://github.com/fengyuanchen/vue-qrcode/issues
- npm.io page: https://npm.io/package/@chenfengyuan/vue-qrcode

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2022-02-07
- 2.0.0-rc.1 (next) — 2021-08-23
- 2.0.0-rc — 2021-06-12
- 2.0.0-beta — 2021-02-10
- 2.0.0-alpha — 2021-01-30
- 1.0.2 — 2020-01-18
- 1.0.1 — 2019-06-29
- 1.0.0 — 2018-10-21

## README

# vue-qrcode

[![Coverage Status](https://img.shields.io/codecov/c/github/fengyuanchen/vue-qrcode.svg)](https://codecov.io/gh/fengyuanchen/vue-qrcode) [![Downloads](https://img.shields.io/npm/dm/@chenfengyuan/vue-qrcode.svg)](https://www.npmjs.com/package/@chenfengyuan/vue-qrcode) [![Version](https://img.shields.io/npm/v/@chenfengyuan/vue-qrcode.svg)](https://www.npmjs.com/package/@chenfengyuan/vue-qrcode) [![Gzip Size](https://img.shields.io/bundlephobia/minzip/@chenfengyuan/vue-qrcode.svg)](https://unpkg.com/@chenfengyuan/vue-qrcode/dist/vue-qrcode.js)

> QR code component for Vue 3, bases on [node-qrcode](https://github.com/soldair/node-qrcode). For Vue 2, check out the [`v1`](https://github.com/fengyuanchen/vue-qrcode/tree/v1) branch.

- [Docs](src/README.md)
- [Demo](https://fengyuanchen.github.io/vue-qrcode)

## Main files

```text
dist/
├── vue-qrcode.js         (UMD, default)
├── vue-qrcode.min.js     (UMD, compressed)
├── vue-qrcode.esm.js     (ECMAScript Module)
├── vue-qrcode.esm.min.js (ECMAScript Module, compressed)
└── vue-qrcode.d.ts       (TypeScript Declaration File)
```

## Getting started

### Installation

Using npm:

```shell
npm install vue@3 qrcode@1 @chenfengyuan/vue-qrcode@2
```

Using pnpm:

```shell
pnpm add vue@3 qrcode@1 @chenfengyuan/vue-qrcode@2
```

Using Yarn:

```shell
yarn add vue@3 qrcode@1 @chenfengyuan/vue-qrcode@2
```

Using CDN:

```html
<script src="https://unpkg.com/vue@3"></script><!-- Vue.js is required -->
<script src="https://unpkg.com/qrcode@1.5.0/build/qrcode.js"></script><!-- qrocde is required -->
<script src="https://unpkg.com/@chenfengyuan/vue-qrcode@2"></script>
```

### Usage

```js
import { createApp } from 'vue';
import VueQrcode from '@chenfengyuan/vue-qrcode';

const app = createApp({});

app.component(VueQrcode.name, VueQrcode);
```

```html
<vue-qrcode value="Hello, World!" :options="{ width: 200 }"></vue-qrcode>
```

## Browser support

Same as Vue 3.

## Versioning

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

## License

[MIT](https://opensource.org/licenses/MIT) © [Chen Fengyuan](https://chenfengyuan.com/)

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