vue-qrcode-reader
vue-qrcode-reader copied to clipboard
gruhn
Vue 3 compatibility
Describe the bug I started a project in vue3 but can't get this plugin working in it. plugin version: 2.3.13
Screenshots
Desktop:
- OS: Manjaro Linux
- Browser: Chrome
- Version: 86.0.4240.75
Smartphone:
- Device: Xiaomi Mi A3
- OS: Android 10
- Browser: Chrome
- Version: 85.0.4183.127
I agree this is important. I just haven't had time look into this properly yet.
I only did some superficial research and I couldn't figured out how to deal with this in a backwards compatible way. From the Vue 3 docs:
We are still working on a dedicated Migration Build of Vue 3 with Vue 2 compatible behavior and runtime warnings of incompatible usage. If you are planning to migrate a non-trivial Vue 2 app, we strongly recommend waiting for the Migration Build for a smoother experience.
https://v3.vuejs.org/guide/migration/introduction.html#breaking-changes
Maybe this Migration Build will be helpful here.
I need to use this library urgently, so I clone this project and rework on it for vue 3 compability. not vue 2 compatible though. https://github.com/HJ29/vue3-qr-reader I didn't work on a forked repo because there is some vue 2 and vue 3 dependencies package conflict. I am so lazy to debug it, so i just create a brand new vue 3 project with vue-cli, copy some of the related js code and rework on it. I am not sure if I am allowed to do this (copy code from this repo and create my own repo), let me know if it is not allowed. I will make it private. Thank you.
Any progress on this issue? This is the only reliable HTML and JS powered QR code reader I found and I tried many. This is a great project overall, nice API and well documented. In fact, I believe it should go framework-agnostic so it could work in React or Angular. Please refactor this for Vue 3.
This is already available for Vue 3, please check it out @Tech1c4| https://github.com/HJ29/vue3-qr-reader
On Sat, 3 Apr 2021 at 22:03, Techn1c4l @.***> wrote:
Any progress on this issue? This is the only reliable HTML and JS powered QR code reader I found and I tried many. This is a great project overall, nice API and well documented. In fact, I believe it should go framework-agnostic so it could work in React or Angular. Please refactor this for Vue 3.
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/gruhn/vue-qrcode-reader/issues/203#issuecomment-812869678, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJWVF7LZX2FAVN7WGPQOCZDTG4N37ANCNFSM4SMRV62A .
This is already available for Vue 3, please check it out @Tech1c4| https://github.com/HJ29/vue3-qr-reader … On Sat, 3 Apr 2021 at 22:03, Techn1c4l @.***> wrote: Any progress on this issue? This is the only reliable HTML and JS powered QR code reader I found and I tried many. This is a great project overall, nice API and well documented. In fact, I believe it should go framework-agnostic so it could work in React or Angular. Please refactor this for Vue 3. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#203 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJWVF7LZX2FAVN7WGPQOCZDTG4N37ANCNFSM4SMRV62A .
I know about this package, unfortunately, it won't work in my project.
Hi guys! I used this plugin in a vue2 app and it worked perfectly. Very cool component for Vue. The only one with camera scanner feature I think. No I am trying to use it in another app with Vue 3 and Typescript and it does not work with Typescript either. It would be nice to have TS support as well.
I have got the same error. I like this component in vue2, but does not work in vue3.
I have made it compatible with vue3 .. https://github.com/scholtz/qrcode-reader-vue3
npm install --save qrcode-reader-vue3
@scholtz thanks for taking the time. Is your version compatible with both Vue 2 and 3?
@gruhn I have not tested vue2 .. i am actually using your project in my old vue2 app (Covid testing app) 👍
The Vue 3 migration build was recently released. I was hoping that would make it quick and easy to introduce Vue 3 compatibility. Only one problem. It doesn't work well with VuePress, the static site generator that powers the demo page. So it requires some more work on that front.
If you want to try it out, here have a pre-release:
npm install [email protected]
You might want to install the exact version like that:
npm install --save-exact [email protected]
Otherwise it will install another version when reinstalling the dependencies with npm install later.
@gruhn Hi Niklas, first at all, thank you for your hard work I was wondering if there is any updates onVue 3 compatibility ? is there any roadblocks we can help you with ?
Thank you.
Hi! This project has been updated recently, which makes me wonder if there is going to be an official version or at least a fork/different project for the Vue 3 ecosystem, since every time I update the dependencies in my project, the "3.1.0-vue3-compatibility.4" gets replaced by "3.1.1" automatically. Please contact me if I can do anything to help with this, thanks!
Hi @dmoyadev, your help would be greatly appreciated. As I stated above:
Only one problem. It doesn't work well with VuePress, the static site generator that powers the demo page. So it requires some more work on that front.
That was a while ago though, so that might have changed. If you're up for that, I'd gladly merge your PR. You can base your changes off of #243 but you can also start from scratch if you prefer. I think it's not so critical to maintain compatibility with both Vue 2 and 3 anymore. So from my side, you can also make a pure Vue 3 version. People who need Vue 2 can downgrade. Only acceptance criterium: I can view and test the deployed demo page without doing any setup on my machine. GitHub Actions are already configured, so I hope it isn't too complicated to get it going on a fork.
Hi! This project has been updated recently, which makes me wonder if there is going to be an official version or at least a fork/different project for the Vue 3 ecosystem, since every time I update the dependencies in my project, the "3.1.0-vue3-compatibility.4" gets replaced by "3.1.1" automatically. Please contact me if I can do anything to help with this, thanks!
@dmoyadev you can remove the ^ prefix of the package's version in package.json to prevent it from upgrading to the latest release.
You're the one who can make a timeline! Tell that you're working on it and how long it'll take. Otherwise wait for someone else to tell that :wink:
我需要紧急使用这个库，所以我克隆了这个项目并重新设计它以实现 vue 3 的兼容性。虽然不兼容 vue 2。 https://github.com/HJ29/vue3-qr-reader 我没有处理分叉存储库，因为存在一些 vue 2 和 vue 3 依赖项包冲突。我懒得调试它，所以我只是用 vue-cli 创建了一个全新的 vue 3 项目，复制一些相关的 js 代码并对其进行返工。我不确定我是否被允许这样做（从这个存储库复制代码并创建我自己的存储库），如果不允许，请告诉我。我会把它变成私人的。 谢谢。
请问一下这个库的QrCapture组件是写死了capture=environment吗？我设置capture=false无效！我看组件代码是写死了capture属性
I've created a PR that migrates this project to v3. Please review! :heart: https://github.com/gruhn/vue-qrcode-reader/pull/343
I hope this can be merged soon... I'm not experienced enough to use a dev branch... I'm barely able to do what I do but I really need this.
I've created a PR that migrates this project to v3. Please review! ❤️ #343
Amazing work, thank's !! by any chance, does your PR include support for "Inverted QR Code" as you moved to another library "@undecaf/barcode-detector-polyfill" ? I can't find any mention of QrCode mode.
Thank you !
I think you can try this out yourself: https://undecaf.github.io/barcode-detector-polyfill/example-loaded/ at least if you're talking about scanning... are you, @nabenzine?
I think you can try this out yourself: https://undecaf.github.io/barcode-detector-polyfill/example-loaded/ at least if you're talking about scanning... are you, @nabenzine?
Thank you for your reply, yes i am talking about scanning, I tested and it doesn't work with inverted QrCode, that a shame cause @gruhn just release a new verion https://github.com/gruhn/vue-qrcode-reader/releases/tag/v3.1.8 that fix this issue
Please try https://dargmuesli.github.io/vue-qrcode-reader/demos/DecodeAll.html, this displays the current state of my PR. I tried it there and it works for me with an inverted qr code :)