{"id":22485610,"url":"https://github.com/NickHurst/nuxt-quasar","last_synced_at":"2025-08-02T18:33:03.094Z","repository":{"id":37734227,"uuid":"191837173","full_name":"NickHurst/nuxt-quasar","owner":"NickHurst","description":"Nuxt module for the Quasar Framework","archived":false,"fork":false,"pushed_at":"2022-12-10T19:03:08.000Z","size":3456,"stargazers_count":38,"open_issues_count":34,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-26T07:04:48.739Z","etag":null,"topics":["nuxt","nuxt-module","nuxtjs","quasar","quasar-framework","vue","vuejs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NickHurst.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-13T21:44:03.000Z","updated_at":"2024-09-01T20:48:05.000Z","dependencies_parsed_at":"2023-01-26T10:16:20.849Z","dependency_job_id":null,"html_url":"https://github.com/NickHurst/nuxt-quasar","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NickHurst%2Fnuxt-quasar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NickHurst%2Fnuxt-quasar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NickHurst%2Fnuxt-quasar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NickHurst%2Fnuxt-quasar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NickHurst","download_url":"https://codeload.github.com/NickHurst/nuxt-quasar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228499981,"owners_count":17929991,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt","nuxt-module","nuxtjs","quasar","quasar-framework","vue","vuejs"],"created_at":"2024-12-06T17:12:53.941Z","updated_at":"2024-12-06T17:14:45.711Z","avatar_url":"https://github.com/NickHurst.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Nuxt Quasar Module\n\n[![npm](https://img.shields.io/npm/v/nuxt-quasar.svg)](https://www.npmjs.com/package/nuxt-quasar)\n\nA Nuxt module for the [Quasar Framework](https://quasar.dev).\n\n\u003e Note this module only supports Quasar \u003e= 1.0\n\n**This is currently very early in development,\nso use with caution. There are currently no tests, but this module\nis currently used in production on a few of my Nuxt apps, however they\nall follow the roughly same configuration, so there are likely bugs lurking\nthat I haven't found due to the limited usage at the time, so if you find a bug,\nplease create an issue so I (or maybe someone else) can get it fixed.**\n\n## Install\n\n```bash\n$ npm install --save nuxt-quasar\n\n# Or with Yarn\n\n$ yarn add nuxt-quasar\n```\n\nThen add it to your `nuxt.config.js`:\n\n```js\nexport default {\n  // ...\n  modules: [\n    'nuxt-quasar',\n  ],\n  // ...\n};\n```\n\nThen start it up to load Quasar with everything loaded and the default configuration, or start adding your own [configuration](#Configuration) via the `nuxt.config.js` or by creating a `quasar.conf.js`.\n\n## Features\n\n* Allows for configuring the Quasar Framework through `nuxt.config.js` or\n  `quasar.conf.js` (Currently only supports a subset of Quasar's configuration options)\n* Brings some features that are only available when using Quasar CLI/Vue CLI\n  like automatically importing Quasar's theme and your custom Stylus variables into\n  your Vue components\n* Tree Shaking\n* Supports Nuxt's Universal mode for SPAs or SSR, as well as Nuxt's static generation\n\n### Roadmap\n\n* Support [Quasar App Extensions](https://quasar.dev/app-extensions/introduction),\n  Nuxt's module API exposes a similar interface to Quasars App Extensions API which\n  will allow for utilizing Quasar's App Extensions in the exact same manner as\n  Quasar CLI.\n* Use Nuxt's module package commands to emulate some of the functionality\n  of Quasar CLI.\n\n## Configuration\n\n`nuxt-quasar` currently supports the following [Quasar Config Options](https://quasar.dev/quasar-cli/quasar-conf-js):\n\n* animations\n* extras\n* framework\n  * config\n    * brand\n  * components\n  * directives\n  * plugins\n  * iconSet\n  * cssAddon\n* supportIE\n\nYou can configure these options in your `nuxt.config.js`:\n\n```js\nexport default {\n  quasar: {\n    animations: [\"fadeIn\", \"fadeOut\"],\n    extras: [\"fontawesome-v5\"],\n    framework: {\n      config: {\n        brand: {\n          primary: \"#ffffff\",\n          // ...\n        },\n      },\n      components: [\n        \"QAvatar\",\n        \"QBtn\",\n        // ...\n      ],\n      directives: [\"ClosePopup\"],\n      plugins: [\"Cookies\"],\n      iconSet: \"fontawesome-v5\",\n      cssAddon: true\n    },\n    supportIE: true\n  },\n};\n```\n\nOr you can alternatively use a `quasar.conf.js`:\n\n```js\n// Note ctx will be undefined currently, eventually\n// support will be added to emulate the Quasar Context object\n// allowing for dyanmic configuration\nmodule.exports = function(ctx) {\n  return {\n    animations: [\"fadeIn\", \"fadeOut\"],\n    extras: [\"fontawesome-v5\"],\n    framework: {\n      config: {\n        brand: {\n          primary: \"#ffffff\",\n          // ...\n        },\n      },\n      components: [\n        \"QAvatar\",\n        \"QBtn\",\n        // ...\n      ],\n      directives: [\"ClosePopup\"],\n      plugins: [\"Cookies\"],\n      iconSet: \"fontawesome-v5\",\n      cssAddon: true\n    },\n    supportIE: true\n  };\n};\n```\n\nThen for your custom theme/Quasar Variable overrides, you can create a\n`quasar.variables.styl` file in `./assets`. These variables along with\nall of Quasars other variables will automatically be imported into your\nVue components with a stylus style block:\n\n```stylus\n// ./assets/quasar.variables.styl\n\n$primary = #ffffff\n// etc...\n```\n\n```html\n// ./components/MyComponent.vue\n\u003cstyle lang=\"stylus\"\u003e\n.my-component\n  color $positive\n  background-color $primary\n\u003c/style\u003e\n```\n\n### Why/Who's this For\n\nThis was created because I have a few existing Nuxt projects, most of which\nwere originally created while Quasar while still in early beta, and while\nI had wanted to use Quasar orginally on a few of them, I decided to use\nalternatives while Quasar matured.\n\nHowever, now that Quasar is out of beta, and offers one of the best UI\nFrameworks available (in my opinion), I found myself wanting to start migrating\nthose Nuxt apps over. Unfortunately though, Quasar only offers three ways to\nintegrate it into your project (UMD, Quasar CLI, or Vue CLI). Quasar CLI\nis great, but can't be integrated into existing projects. Vue CLI is also\na great tool, but yet again, can't easily be integrated into an existing Nuxt project.\nSo, that leaves the UMD build, which while convinient, it doesn't offer all\nthe benefits that Quasar/Vue CLI have (mainly treeshaking and configuration).\n\nWhat I really wanted was an option to slowly integrate Quasar into a Nuxt\nproject, as for some of the projects I would also like to eventually migrate\nto use Quasar CLI rather than Nuxt due to the features Quasar CLI offers like\nbuilding for Electron/Cordova that are lacking in Nuxt. But, in addition to\nmigrating the actual code to use the Quasar components, that would require\nalso restructuring the entire project, and doing both at the same time sounds\nlike a recipe for disaster. However, some of the projects (the ones that use\nNuxt's static generation -- a feature unavailable in Quasar), I don't plan\non migrating from Nuxt, but would like to be able to use the same config/files\nas I would when I'm working on a Quasar CLI project. Thus, this module was created.\n\nSo, if you want to use Quasar with Nuxt, incrementally migrate your Nuxt\napp to Quasar CLI, or just don't want to have the bloat of the UMD build,\nyou may find this module useful.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNickHurst%2Fnuxt-quasar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNickHurst%2Fnuxt-quasar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNickHurst%2Fnuxt-quasar/lists"}