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

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 e.g. 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>

Answer 2

---

Current answer

⚠️⚠️⚠️⚠️⚠️
Just don't do that, you will shoot yourself in the foot down the road, use the appropriate tool for the right purpose and keep it simple so that you can have something simple to debug, easily maintainable and performant.
More details on my thinking here (same page actually, just in a comment).
⚠️⚠️⚠️⚠️⚠️

---

Old answer

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.

---

Anyway, I don't see the point of it since it's doing pretty much what Nuxt is doing.
You could just use the components via Vuetify if this is what you're looking for.

Answer 3

For those coming here, a great plugin Nuxt-Quasar is available which combines the power of Nuxt with all the components and plugins of Quasar!

Answer 4

Quasar and Nuxt do not play well together!

---

Top reasons to not choose Quasar with Nuxt:

• If you read Quasar's docs, it says that SSR builds are supported ONLY through Quasar CLI. So if you plan to use Quasar in Nuxt, most probably you will encounter hydration errors.

  If you plan to build an SPA with Nuxt though, without any kind of SSR or static pages, it will probably work fine.

• The Creator of Quasar clearly stated here that Nuxt is not currently on the radar and if you see the Roadmap still (at the time of writing this) there is not anything about Nuxt.

If you are still not convinced and you want to try Quasar in Nuxt, the best option is to use an unofficial module built in a very brilliant way: Quasar module

Answer 5

Just move your project to Nuxt-quasar boilerplate. clone the boilerplate from: https://github.com/piscis/nuxt-quasar-boilerplate