feat: migrate to vue 3

[dargmuesli]

Resolves #203.

Uses Typescript, Vite and Vitepress. Uses ~@undecaf/barcode-detector-polyfill~ @sec-ant/barcode-detector

[gruhn]

Really cool thanks. Is the demo page deployed somewhere, so I can test it?

[dargmuesli]

Now it is: https://dargmuesli.github.io/vue-qrcode-reader/ :partying_face:

[gruhn]

But all in all, really cool so far. Vitepress really looks much nicer. And also dark mode for free 👍

I also noticed that the "visual tracking" works slightly different on the new demo page. Essentially "outline" works like "bounding box" now:

[dargmuesli]

Thank you for the feedback! You got all the little things I was not sure about :wink: I will dive deeper later :)

[dargmuesli]

Not sure why the outline now behaves like a bounding box now :joy: haven't looked into this implementation yet, but will do so later, as promised :)

Edit: Ahh, I think I have a general idea where this could stem from.

[dargmuesli]

Now that barcode-detector is used again, the outline is shown correctly again. I kept @undecaf/barcode-detector-polyfill only as devdependency to provide types for typescript.

[gruhn]

Another difference I noticed is the "Scan Same QR Code More Than Once" demo. On detection, it's supposed to pause the stream and show a transparent-white overlay with a green checkmark in the center:

https://gruhn.github.io/vue-qrcode-reader/demos/ScanSameQrcodeMoreThanOnce.html

But here container just seems to collapse to zero height:

https://dargmuesli.github.io/vue-qrcode-reader/demos/ScanSameQrcodeMoreThanOnce.html

[dargmuesli]

ScanSameQrcodeMoreThanOnce.html fixed! :raised_hands:

[dargmuesli]

@gruhn what do you think about my changes? :)

[gruhn]

Haven’t had time to further look into it deeply yet, sorry

[gruhn]

Alright, I'm gonna merge this bad boy. Thanks for all the work!