# qrcode-vuejs

> QR Code generator for Vue.js

Latest version **1.0.4** (published 2023-01-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install qrcode-vuejs
pnpm add qrcode-vuejs
yarn add qrcode-vuejs
bun add qrcode-vuejs
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2023-01-13 |
| First published | 2023-01-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 76.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ishin Vin |
| Maintainers | ishin |
| Keywords | qrcode, QR code, vue, vue-component |

## Links

- npm: https://www.npmjs.com/package/qrcode-vuejs
- Repository: https://github.com/ishinvin/qrcode-vue
- Homepage: https://github.com/ishinvin/qrcode-vue#readme
- Issues: https://github.com/ishinvin/qrcode-vue/issues
- npm.io page: https://npm.io/package/qrcode-vuejs

## 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.0.4 (latest) — 2023-01-13
- 1.0.3 — 2023-01-12
- 1.0.2 — 2023-01-12
- 1.0.1 — 2023-01-12

## README

# QRCode Generator for Vue

QR code implementation based on https://github.com/kazuhikoarase/qrcode-generator
<br>

[Online Demo](https://ishinvin.github.io/qrcode-vue/)

## Installation

```sh
npm i qrcode-vuejs
```

## Usage

#### Import
```js
import VQrcode, { ErrorCorrectLevel, RenderOptions } from 'qrcode-vuejs';
```
#### Basic
```js
// register component
import { createApp } from 'vue';
import VQrcode from 'qrcode-vue';
import TestView from './TestView.vue';

const app = createApp(TestView);
app.use(VQrcode);
app.mount('#test');
```

#### Plugin
```js
// register component
import { createApp } from 'vue';
import VQrcode, { ErrorCorrectLevel, RenderOptions } from 'qrcode-vuejs';
import TestView from './TestView.vue';

const app = createApp(TestView);
app.use(VQrcode, {
    size: 200,
    colorDark: '#000000',
    colorLight: '#ffffff',
    correctLevel: ErrorCorrectLevel.M,
    render: RenderOptions.CANVAS,
});
app.mount('#test');


```

```js
<script setup lang="ts"></script>
<template>
    <v-qrcode text="https://ishinvin.github.io" />
</template>
```

#### Import Component
```js
// Single-File Components
<script setup lang="ts">
import { VQrcode, RenderOptions, ErrorCorrectLevel } from 'qrcode-vuejs';
</script>

<template>
    <v-qrcode
        text="https://ishinvin.github.io"
        :size="200"
        :render="RenderOptions.CANVAS"
        :correct-level="ErrorCorrectLevel.M"
        color-dark="#000000"
        color-light="#ffffff"
    />
</template>
```

## Props
| Name          | Type              | Default  | Description                            |
| ------------- | ----------------- | -------- | -------------------------------------- |
| text          | string            |          | QR string value to generate            |
| size          | number            | 200      | Size of the QR code canvas             |
| render        | RenderOptions     | CANVAS   | Render type (CANVAS, SVG, IMAGE, HTML) |
| color-dark    | string            | #000000  | Foreground color of the QR             |
| color-light   | string            | #ffffff  | Background color of the QR             |
| correct-level | ErrorCorrectLevel | M        | QR Code has error correction capability to restore data if the code is dirty or damaged. (L = Approx 7%, M = Approx 15%, Q = Approx 25%, H = Approx 30%) |

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