How to add Quasar to an existing Nuxt app?

Question

I want to install Quasar to my existing Nuxt project. I've been reading through the quasar docs and the only thing they mentioned in the installation page is their own CLI which has no option for Nuxt. I also came across the nuxt-quasar module but it not maintained anymore. Has anyone have any experience with this?

Answer 1

You can either following this github issue: https://github.com/NickHurst/nuxt-quasar/issues/15

Either ask on their forum: https://forum.quasar-framework.org/

But it looks like that Quasar is not actually aimed towards an integration inside of Nuxt because it's doing it's own thing.

You also could create a Vue app, add Quasar and then migrate it to Nuxt. Cumbersome but doable IMO. But one thing is sure, this is not a common usage looking at the non-existence of this use-case.

You can maybe also ask Bence Szalai: https://github.com/NickHurst/nuxt-quasar/issues/7#issuecomment-683255301
His twitter DMs are open.

Lastly, you can still try the Nuxt module and see how it goes. There are maybe not a lot of updates on the project. Or the CDN way but yeah...CDN.

Answer 2

If it's Vue compatible then it's Nuxt compatible. Period. No idea what the accepted answer is talking about it being cumbersome, it's the same process as you do for any other framework, basically identical to what you do with eg Vuetify. Non-standard for Quasar, sure, but it's Vue compatible, there's nothing particularly cumbersome or difficult about it.

Here's how you do it in Nuxt 3. Slightly different for Nuxt 2 where you import Vue in order to .use something, I made it for Nuxt 3 to be more future proof.

From https://quasar.dev/start/umd . Just do the same things they do there, but in a Nuxt manner. First they get styles and fonts in the head. Then they get the scripts. Then they register Quasar in Vue. Lets do that now!

// plugins/quasar.js
import 'quasar/dist/quasar.prod.css'
import Quasar from 'quasar/dist/quasar.umd.prod';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Quasar, {
        config: {
            // options
        }
    })
})

// nuxt.config.js
{
    plugins: [
        '~/plugins/quasar.js'
    ]
}

Done: Now we can use it like this:

<q-page-container>
  <q-page>
    <h1>Hello World!</h1>
  </q-page>
</q-page-container>