Closed hgalytoby closed 10 months ago
Hi, can you provide a minimal (online deployed) reproduction of this problem? For example, using CodePen or GitHub Pages. Otherwise it’s very hard to debug this.
Hi, can you provide a minimal (online deployed) reproduction of this problem? For example, using CodePen or GitHub Pages. Otherwise it’s very hard to debug this.
https://codesandbox.io/p/sandbox/objective-orla-t2ttl5
https://dudululee.github.io/vue-qrcode-vendor-test/
https://github.com/duduluLee/vue-qrcode-vendor-test
This is a new Vite project.
npm i vite-plugin-mkcert -D
npm install vue-qrcode-reader
vite.config.js plugins add mkcert
Use the code from https://vue-qrcode-reader.netlify.app/demos/CustomTracking.html.
Additionally, I have used the program from https://vue-qrcode-reader.netlify.app/demos/Validate.html, but the results were not as expected.
Thanks for providing this demo. It looks like no styling is applied. All of the classes (.qrcode-stream-wrapper
, .qrcode-stream-camera
, etc) have no associated styling rules.
@dargmuesli do you know how styling is supposed to be exported in a Vite setup? Previously all styling was inlined in the JS modules. Now there seems to be an external style.css
:
https://unpkg.com/browse/vue-qrcode-reader@5.3.0/dist/
I suspect for most users this is imported automatically somehow, since nobody else has complained so far, but how?
I think most users do not need the css or just import the stylesheet. You can add:
<style>
@import "/node_modules/vue-qrcode-reader/dist/style.css";
</style>
I've opened https://github.com/gruhn/vue-qrcode-reader/pull/361 to simplify that to:
<style>
@import "vue-qrcode-reader/style";
</style>
Thanks for the PR :pray: I would prefer to bundle the CSS with JS though or some other method that imports the CSS by default, without any additional import. The styling is very minimal but crucial to render the component properly. So I think all users definitely need this.
It's weird that the demo page itself doesn't require an explicit import as far as I can see. How does it work there?
Here is my own attempt :point_up: not sure if this is ideal though :/
vue 3.3.4 vite 3.4.0 vue-qrcode-reader 5.3.0
I used the example from https://vue-qrcode-reader.netlify.app/demos/CustomTracking.html
However, the result is like this:
Is there something I missed in the setup?
https://github.com/gruhn/vue-qrcode-reader/assets/50397689/5f93dd70-573a-414d-97bc-ff1bd10b8dc8
Thank you for your assistance.