Component CSS not automatically applied

[hgalytoby]

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?

20230820_180005.mp4

Thank you for your assistance.

[gruhn]

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.

[hgalytoby]

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.

[gruhn]

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?

[dargmuesli]

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 #361 to simplify that to:

<style>
@import "vue-qrcode-reader/style";
</style>

[gruhn]

Thanks for the PR 🙏 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?

[gruhn]

Here is my own attempt ☝️ not sure if this is ideal though :/

[gruhn]

@hgalytoby 5.3.3 should provide a workaround for you. Can you confirm?