nuxt-quasar - A Nuxt.js module for integrating with Quasar (initial release, looking for feedback)

[cutety]

nuxt-quasar (npm link)

Hello! nuxt-quasar is a Nuxt.js module to integrate the Quasar Framework into an existing (or new) Nuxt
application. It was built as for existing Nuxt apps, the only way to integrate Quasar was through the UMD build,
or by creating your own custom plugin if you wanted things like Tree Shaking, but even if you’re not concerned with
your bundle size, there are a lot features that come with using Quasar CLI or Vue CLI that are unavailable to the UMD
build (like automatically importing stylus variables, easier configuration, etc…). Ideally, I’d be able to just switch the
Nuxt apps to Quasar CLI and call it a day, but in addition to updating all the code to use Quasar components, it would
also require restructuring the entire project, which just sounds like a good way to break everything all at once.
I wanted a way to slowly integrate Quasar into the app, using the same configurations/methods as a Quasar CLI app,
that way when the day comes to move from Nuxt to Quasar CLI, it should just be as easy as moving the files to the right place
as all the code will be updated, and all the configuration is valid Quasar CLI config.
And that’s what this module aims to do.

Currently nuxt-quasar supports a subset of the quasar.conf.js file (you can either embed this config in your nuxt.config.js under the quasar key,
or just use a quasar.conf.js file!).

The currently supported config options
are:

• animations
• extras
• framework
  • config
    • brand
  • components
  • directives
  • plugins
  • iconSet
  • cssAddon
• supportIE

nuxt-quasar is my first (published) javascript package, it was extracted out from a module I built out at work to start integrating with/migrating some existing Nuxt apps to Quasar, and figured maybe there are some others out there in the same situation I found myself in and could use it. The package is brand new, and while it’s being used in production in apps where I work – it was specifically made to work with those Nuxt projects that each share a nearly identical configuration – so I’m betting there are some bugs lurking that I haven’t been able to find due to the lack of wide usage, so don’t throw this into production just yet (or do, I mean, I did). However, I would greatly appreciate it if you do encounter a bug that you create a new issue on the repo, in addition to hopefully getting the bug fixed, it’ll help me know what kind of edge cases I need to test for as I start building out the test suite.

Let me know if you have any feedback/questions/bugs/etc.

[QuaSam]

Thank you for tackling this objective, as I was curious as to whether Nuxt.js and Quasar combine beneficially. However, I would appreciate an explanation of what the benefits are for doing this. Already we have a huge amount of stuff involved (Node, Vue, Vuex, Quasar) so adding one more package seems like a bad idea unless there are sufficient benefits. If there ae, this combined package could then become a “best practices” approach, with broader support and examples of implementation, possibly some further streamlining.

[s.molinari]

@QuaSam - The only thing Nuxt has that Quasar doesn’t is static site generation. If you don’t need that, you don’t need Nuxt.

Scott

[3KyNoX]

Hello,

there’s also:

• a finished typescript feature
• backends integration
• some themes and design options

[s.molinari]

Backends integration? Themes and design options? Can you link to these please?

Scott

[saknarak]

• Nuxt generates routes base on files in pages directory, Quasar didn’t.
• Nuxt generates store base on files in store directory, Quasar didn’t.
  and so on.

no need to do same work, Nuxt already did.

It would be nice to have Quasar module to work with Nuxt.
So Quasar can be use as just UI Framework with Nuxt like Vuetify do.

[leon]

@saknarak Agree…

[s.molinari]

Nuxt generates routes base on files in pages directory, Quasar didn’t.

For a static or semi-dynamic set of pages, a nice to have. For a full blown app, not so much.

Nuxt generates store base on files in store directory, Quasar didn’t.

If you follow the store pattern that is standard for Vuex, you don’t need anything else. Not an issue.

Nuxt doesn’t support the building of Cordova, Capacitor, Electron or Browser Extension apps, Quasar (CLI) does.

You can use Quasar’s Vue plugin and work with Nuxt too, if you want just the UI.
https://nuxtjs.org/docs/2.x/directory-structure/plugins/
https://quasar.dev/start/vue-cli-plugin

Scott