Is Quasar.js supported?

[heliomar-pena]

Quasar.js have a library of global components, I want to know if I can use Preview.js with Quasar without problems. Currently, I'm receiving this error when I import a Quasar global component:

[fwouts]

Hi @victor-heliomar, it should be possible with a little bit of configuration!

I haven't tried it but this might work:

// FILE: preview.config.js
const { quasar } = require('@quasar/vite-plugin');

module.exports = {
  vite: {
    plugins: [
      quasar()
    ]
  }
}

[heliomar-pena]

Hi @fwouts , thanks for answering quickly. I have tested that configuration. It seems to have worked for some things, for example, if I import an icon from quasar, previewjs loads it. But it looks incomplete, for example, this component it's supposed to be a spinner, but on previewjs it looks like a circle, currently Quasar is not giving me an error, but the spinner is just a circle.

Really it should look so:

However, it is progress!. I think a wrapper can help with this, I just need to get the CSS class of Quasar and put it on the Wrapper

---

That is about the components that just have images, but the components that handle logic, such as input, for example, are giving me this error:

[heliomar-pena]

I have fixed the spinner problem by adding a wrapper with the Quasar CSS: 🎉

But I still don't know what can I do to solve this error 😥

[fwouts]

Cool!

I think what you're probably missing is telling Vue to use Quasar, i.e. app.use(Quasar).

Luckily someone else already figured out how to do this! ➡️ #113 (comment)

I guess it would look like (note I'm not familiar with Vue so syntax might be incorrect):

// Wrapper.vue
<script>
import Quasar from 'quasar';  // or maybe it's not the default export? I don't know :)

const {app} = getCurrentInstance()
app.use(Quasar);
</script>
<template>
  <slot></slot>
</template>

[heliomar-pena]

It is working perfectly for me 😌

Now I just need to add the rest of the things like icons, but it's all I think

Deeply grateful for your help