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

  • 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

    • 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.

  • 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.

  • @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.


  • Hello,

    there’s also:

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

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


    • 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.

Log in to reply