{"id":18369085,"url":"https://github.com/bitfancy/nuxt-quasar","last_synced_at":"2025-08-12T02:36:01.335Z","repository":{"id":237980455,"uuid":"795621759","full_name":"BitFancy/Nuxt-quasar","owner":"BitFancy","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-04T05:52:58.000Z","size":324,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T21:16:48.562Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BitFancy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-03T17:08:16.000Z","updated_at":"2024-10-26T20:13:48.000Z","dependencies_parsed_at":"2024-05-03T19:27:29.673Z","dependency_job_id":"d2b8b5d5-dd8d-475e-abcb-174b1cf23ee9","html_url":"https://github.com/BitFancy/Nuxt-quasar","commit_stats":null,"previous_names":["bitfancy/nuxt-quasar"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BitFancy/Nuxt-quasar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitFancy%2FNuxt-quasar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitFancy%2FNuxt-quasar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitFancy%2FNuxt-quasar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitFancy%2FNuxt-quasar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BitFancy","download_url":"https://codeload.github.com/BitFancy/Nuxt-quasar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BitFancy%2FNuxt-quasar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269990274,"owners_count":24508829,"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","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-05T23:28:24.732Z","updated_at":"2025-08-12T02:36:01.311Z","avatar_url":"https://github.com/BitFancy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Quasar for Nuxt\n\nThis Nuxt module expose UI Components and Utils (Composables, Directives and Plugins) from Quasar Framework UI to Nuxt. This module only can be use on Nuxt with Vite: `nuxt ^3.0.0-rc.2`.\n\n## Pros\n\n- Nuxt SSR for Quasar components.\n- Quasar components that are auto imported by Nuxt.\n- Quasar directives.\n- Quasar composables that are auto imported by Nuxt.\n- Quasar plugins, opt-in imported.\n- Quasar variables on SFC styles.\n- Quasar utils that are auto imported by Nuxt.\n- Nuxt modern and universal, develop and production Nitro server (with API and Middlewares).\n- Nuxt SSG static site generate.\n\n## Cons\n\n- No Quasar Develop Modes (Electron, Capcitor, BEX, etc.)\n\n## Setup\n\nAt your Nuxt project folder:\n\n```sh\n# Install dependencies\npnpm add -D quasar sass @quasar/extras nuxt-quasar-vite\n```\n\n`@quasar/extras` is optional.\n\nAt `nuxt.config.ts` add module name:\n\n```ts\ndefineNuxtConfig({\n  //...\n  // Add nuxt-quasar-vite to modules\n  modules: [\"nuxt-quasar-vite\"],\n  //...\n});\n```\n\nAdd Quasar components to your vue files:\n\n```vue\n\u003c!-- app.vue or layouts/default.vue --\u003e\n\u003ctemplate\u003e\n  \u003cQLayout view=\"hHh lpR fFf\"\u003e\n    \u003cQPageContainer\u003e\n      \u003cQPage padding class=\"column flex-center q-gutter-xl\"\u003e\n        \u003c!-- if on layouts use `slot`. if on app.vue use `NuxtPage` --\u003e\n        \u003cslot /\u003e\n      \u003c/QPage\u003e\n    \u003c/QPageContainer\u003e\n  \u003c/QLayout\u003e\n\u003c/template\u003e\n```\n\n## Nuxt Starter Template\n\nIn this template are configured:\n\n- Default Layout: `layouts/defaults.vue`\n- Default Pages like `index.vue`\n- Use `@nuxt/content@^2.1.1` and `@nuxt/image-edge`, and modifies `ProseImg` to use `QImg`.\n\n### Install\n\n```sh\n# \u003cnuxt-app\u003e it's the name of your project folder\npnpx nuxi init -t gh:memotux/nuxt-quasar-template \u003cnuxt-app\u003e\n\ncd \u003cnuxt-app\u003e\n\npnpm install\n```\n\n## Config\n\n### Defaults\n\n```ts\nquasar : {\n  sassVariables: true,\n  css: ['quasar/src/css/index.sass'],\n  plugins: ['Notify'],\n  config: {\n    dark: true\n  }\n}\n```\n\n### Options\n\nAt `nuxt.config.ts` you can add a `quasar` configKey object:\n\n```ts\ndefineNuxtConfig({\n  // Optionaly use 'quasar' configKey\n  // ...\n  quasar: {\n    // Optional string | boolean\n    sassVariables: \"assets/quasar.variables.scss\",\n    // Optional string[]\n    // If you use animations, add Quasar Extra CSS animation URL here.\n    // NOTE: This CSS files are inserted on module plugin template, NOT on `nuxt.config`.\n    css: [\"@quasar/extras/material-icons/material-icons.css\"],\n    // List of extra Quasar Plugins\n    // auto-instaled: [Platform, Body, Dark, Screen, History, Lang, IconSet]\n    // optional: [AddressbarColor, AppFullscreen, AppVisibility, BottomSheet, Dialog,\n    //            LoadingBar, Loading, Notify, LocalStorage, SessionStorage]\n    plugins: [\"Dialog\"],\n    /* Quasar UI config -- you'll notice in Quasar docs when you need it */\n    config: {\n      dark: false,\n    },\n  },\n  // ...\n});\n```\n\n### Quasar Utils\n\nFor use Quasar Utils autoimport feature, prefix quasar util function name with `q` character. This is a difference with Quasar Framework, but make using utils safe.\n\n```vue\n\u003cscript setup\u003e\n// Autoimport Quasar Util `date` using `qdate`\nconst newDate = qdate.addToDate(new Date(), { days: 7, months: 1 });\n\n// Or use explicit #imports if you want to destructurate\nimport { qdate } from \"#imports\";\n\nconst { addToDate } = qdate;\nconst newDate = addToDate(new Date(), { days: 7, months: 1 });\n\u003c/script\u003e\n```\n\n### Quasar SCSS variables\n\nQuasar SCSS variables and custom `sassVariables` are auto imported on your SASS/SCSS assets files.\n\n```scss\n.container {\n  border-color: $primary;\n}\n```\n\nFor more information, you can read the [Quasar Vite Plugin docs](https://quasar.dev/start/vite-plugin), and `quasar.config.ts` [framework](https://quasar.dev/quasar-cli-vite/quasar-config-js#framework) docs.\n\n## TODO\n\n- Add to quasar configKey animations.\n- Add to quasar configKey iconSet and icon libraries.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitfancy%2Fnuxt-quasar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitfancy%2Fnuxt-quasar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitfancy%2Fnuxt-quasar/lists"}