fengyuanchen / vue-qrcode

QR code component for Vue.js

vue-qrcode

QR code component for Vue 3, bases on node-qrcode. For Vue 2, check out the v1 branch.

• Docs
• Demo

Main npm package files

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:

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

Using pnpm:

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

Using Yarn:

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

Using CDN:

<script src="https://unpkg.com/vue@3"></script><!-- Vue.js is required -->
<script src="https://unpkg.com/[email protected]/build/qrcode.js"></script><!-- qrocde is required -->
<script src="https://unpkg.com/@chenfengyuan/vue-qrcode@2"></script>

Usage

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

const app = createApp({});

app.component(VueQrcode.name, VueQrcode);

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

Browser support

Same as Vue 3.

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Chen Fengyuan

vue-qrcode's Issues

Accessing img src of resulting qr code

I'd love an example of accessing the component's internal state.
More precisely, the src/base64 string of the image it creates when tag equals img.

Use case: I'm wrapping the component in a div which contains a v-on:click event.
On click I want to save the img to a file.

I could, of course, simply give an id to the component and target that. However, that doesn't appear to be a very vue-ish way of doing this.

如何能直接调用QRCode.toDataURL方法呢

引用了vue-qrcode插件，如果不引用qrcode
如何能直接调用QRCode.toDataURL方法呢。

Export as Image Function Question

Not really an issue, but I'm looking to add a download option to my website, is there an easy way to export this as an image?

Qrcode with text

I'm generating qr code to links, and it's ok. I wanna know if is possible put a text inside or below the qr code with a small phrase, or a word.

Eye Pattern Of QR Code

请问能不能 加个 修改 眼睛形状 的 调整？
比如原本的 正方形 可以变成 圆形

非常谢谢

unpkg.com 找不到專案

請問相對的連結是？

https://unpkg.com/vue-qrcode

這個是另一個專案，但我想引入作者的專案

打包出错你都没有自测过？

打包依赖不成功 你写的安装依赖文档也不对

引用库的时候报了两个错

报错信息如下：
warning in ./node_modules/@chenfengyuan/vue-qrcode/dist/vue-qrcode.esm.js
"export 'defineComponent' was not found in 'vue'

warning in ./node_modules/@chenfengyuan/vue-qrcode/dist/vue-qrcode.esm.js
"export 'h' was not found in 'vue'

请问作者这个怎么回事，现在项目都打不开了，一直报这两个错

value值动态绑定的，微信扫一扫得到的值不对

TicketInfo.OrderID是从后台获取绑定的。
微信扫一扫得到的值是”TicketInfo.OrderID“，不是实际动态绑定的值

jest cannot set property '0' of undefined

TypeError: Cannot set property '0' of undefined
at Object.qrToImageData (/node_modules/_@[email protected]@@chenfengyuan/vue-qrcode/dist/vue-qrcode.common.js:2679:25)

在使用Jest做单元测试时，采用了jest-canvas-mock来模拟canvas，结果在vue-qrcode.common.js的2679行代码报错，打印出来的imgData为undefined，所以代码报错。

Error

报错（error）：
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Version 1.0.2 is not support Internal Explorer 10.

Version 1.0.2 is not support Internal Explorer 10.
Conditional change the Browser support

Uninstalling results on broken Vue dependency

Seems like when uninstalling this component, as result vue is also uninstalled, not sure if this is a dependency issue.

在vue3版本中，运行报错

这是模板层

这是报错的地方

难道我不能这样使用吗？

怎么跳转小程序某个详情页

如何操作能使生成的二维码，扫码后直接跳转到小程序某个详情页

any chance to support vue2

As described in title, this repo is nice but it only support Vue3, hope for reply!

Thanks!

rendering with enable-force-dark and svg tag

Hi,
i have this:
<VueQrcode class="mx-auto z-30 relative" style="width:230px; height:230px;" :value=qrcode tag="svg" :options="{ width: 230, color: {dark: '#000',light: '#fff'} }"></VueQrcode>
with flag enable-force-dark enabled i obtain a white square.
Possible solution?

hello！请问如何自定义通过二维码扫描下载的文件名称？

不自定义文件名称则最后扫码下载时文件名称为null

    <vue-qrcode :value="fileUrl" :options="{ width: 300 }"></vue-qrcode>

CI build failed.

I am using 2.0.0-rc.1 version.
I got an error when building with CI.

This dependency was not found:
 ERROR  Build failed with errors.

* qrcode in ./node_modules/@chenfengyuan/vue-qrcode/dist/vue-qrcode.esm.js

Is it possible to move the qrcode from devDependencies to dependencies?

No Be Supported In Wechat

Adding Line Space In QR Code Value

how can I add line space in the QR code value? It shows everything on one line. Any solution?

支持二维码中间放小logo不

[Vue warn]: Failed to resolve component: vue-qrcode

Hi!... i have tried to import it just as stated in the documentation, but... I'm getting this error:

[Vue warn]: Failed to resolve component: vue-qrcode

main.ts

...
import { createApp } from 'vue'
import VueQrcode from "@chenfengyuan/vue-qrcode";
...
let app = createApp(App).provide('store', store)
...
app.component(VueQrcode.name, VueQrcode);

Any hints? I'm using script setup for components, but still, I have imported other components before and they work perfectly...

Thanks in advance

Can I add logo in center of QR

Can I add a logo to the center of QR?
Or do you have any idea to solve this issue?

:options="{ width: 200 }"

如何将生成的二维码作为图片下载下来呢！

这个有解析二维码功能吗？

url的长度不同会导致padding错误？

<qrcode :value="url" :options="{ size: 500, padding: 24 }"></qrcode>

Remove canvas whitespace

Hi!

Can i remove the canvas whitespace ? that mean just the QR Code in the canvas

Thanks :)

vue 报错

"@chenfengyuan/vue-qrcode": "^1.0.2"

vue版本：

"vue": "^2.4.2"

prevUrl: ''

报错：

Error in callback for watcher "$props": "Error: No input text"

if (typeof data === 'undefined' || data === '') {
	    throw new Error('No input text')
	  }

提一个组件问题

new QRious(Object.assign({
        element: this.$el,
        value: this.value,
      }, this.options));

为什么要用Object.assign

Vue 3, extract QR image

Is there an example somewhere on how to extract the QR image from QR generated in template ( perhaps using ref or other means )
I am trying to use the generated QR to insert into email. Thanks!

老版本中 option 里的size， 在vue3中需要怎么配置？

新版中的 api 参考， 没有 size 这个属性

Send component to print as canvas

Hello!
I'm trying to send my component to print, but what I've searched is that I need to convert it to v-html so I think converting the QR to canvas it would work.
Can anyone help me please?

qrcode :value="value" :options="{size: 200, foreground: 'black'}" v-html="QRcodigo"

that's my code.

Vue3 support: TypeError: createElement is not a function

Not working with vue3..

TypeError: createElement is not a function

能否将canvas的style属性去掉？

当我要用css控制它的max-width或者min-width的时候，因为有style影响，会变形

Treat qrcode as dependency rather than peerDependency

In version 1.x, qrcode is dependency, but it changed now, it is peerDependency now. I'm really puzzled about what makes this change.
In my opinion, users don't need to install qrcode manually if qrcode is treated as dependency.

not provide vue2 ready event

how to get the image URL of the generated QR code

Hello! thank you for this, but how do I get the data URI of the generated image?

I'm using it like this:

<qrcode :value="this.url" :options="{ width: 200 }" tag="img"></qrcode>

Eye Pattern Of QR

请问能不能 加个 修改 眼睛形状 的 调整？
比如原本的 正方形 可以变成 圆形

非常谢谢

Size issue with vuex

Hi,

When using this component with Vuex and a custom size, the new QRCode size does not respects the asked size when the QRCode value is updated (we get a small QRCode in a large, white square).

中文乱码

value字段的值传中文生成的二维码，扫描出来是乱码的，请问如何解决？

Save qr as image or base64

How do it to save qr value???

components能直接用VueQrcode.name? 你确定你在vue cli下用过?

直接报错, 语法都通不过

Hello how to download qr code after generated ?

Here is my code i want to download Qrcode.

<vue-qrcode :value="gameUrl.ios" class="sm:max-h-fit w-full  rounded-t-lg" tag="img" :options="{
 errorCorrectionLevel: 'Q',
 width:300
  }"></vue-qrcode>