v2.1.0.rc

.vscode/settings.json

@@ -2,7 +2,7 @@
   "prettier.enable": false,
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "files.exclude": {
     "node_modules/[^q]*": true

README.md

@@ -179,7 +179,6 @@ Module will import css in following order:
 2) Icons
 3) Animations
 4) Quasar CSS
-5) Brand
 
 It is possible to change this order via `css` option.
 
@@ -193,7 +192,6 @@ export default defineNuxtConfig({
     'quasar/animations',
     'quasar/icons',
     'quasar/css',
-    'quasar/brand' // If config.brand is used
     // ...
   ]
 })

package.json

@@ -2,7 +2,7 @@
   "name": "nuxt-quasar-ui",
   "type": "module",
   "version": "2.0.8",
-  "packageManager": "pnpm@8.11.0",
+  "packageManager": "pnpm@9.0.6",
   "description": "Quasar Module for Nuxt (Unofficial)",
   "license": "MIT",
   "repository": {
@@ -22,7 +22,7 @@
     "dist"
   ],
   "scripts": {
-    "prepack": "nuxt-module-build",
+    "prepack": "nuxt-module-build build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:analyze": "nuxi analyze playground",
@@ -39,11 +39,17 @@
     "@quasar/extras": "^1",
     "quasar": "^2.8.0"
   },
+  "peerDependenciesMeta": {
+    "@quasar/extras": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@nuxt/kit": "^3.11.1",
+    "defu": "^6.1.4",
     "magic-string": "^0.30.8",
-    "magicast": "^0.3.3",
-    "p-memoize": "^7.1.1"
+    "p-memoize": "^7.1.1",
+    "semver": "^7.6.0"
   },
   "devDependencies": {
     "@antfu/eslint-config-ts": "0.39.5",
@@ -59,7 +65,7 @@
     "jsdom": "^24.0.0",
     "nuxt": "^3.11.1",
     "quasar": "^2.15.2",
-    "sass": "^1.72.0",
+    "sass": "^1.75.0",
     "typescript": "^5.4.3",
     "vite": "^5.2.7",
     "vitest": "^1.4.0",

playground/app.config.ts

@@ -0,0 +1,10 @@
+import { defineAppConfig } from '#imports'
+
+export default defineAppConfig({
+  // UI Configuration in `app.config` will override `nuxt.config`
+  nuxtQuasarCustom: {
+    brand: {
+      primary: 'purple',
+    },
+  },
+})

playground/components/PropDefaults.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import {ref} from "#imports";
+const toggle = ref(true);
+</script>
+
+
+<template>
+  <div>
+    <QMarkupTable style="max-width: 600px;">
+      <tbody>
+        <tr>
+          <td>
+            Q-CircularProgress with blue as the default color:
+          </td>
+          <td>
+            <QCircularProgress />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Q-Toggle with red as the default color:
+          </td>
+          <td>
+            <QToggle v-model="toggle"/>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Q-Linear-Progress with green as the default color:
+          </td>
+          <td>
+            <QLinearProgress indeterminate/>
+          </td>
+        </tr>
+      </tbody>
+    </QMarkupTable>
+  </div>
+</template>

playground/layouts/default.vue

@@ -59,11 +59,11 @@ function toggleLeftDrawer() {
       <q-toolbar>
         <q-btn
           flat
+          color="white"
           dense
           round
           icon="menu"
           aria-label="Menu"
-          :glossy="false"
           @click="toggleLeftDrawer"
         />
 

playground/nuxt.config.ts

@@ -6,6 +6,7 @@ export default defineNuxtConfig({
     '../src/module',
     '@nuxt/devtools',
   ],
+  ssr: true,
   quasar: {
     plugins: [
       'AppFullscreen',
@@ -15,6 +16,7 @@ export default defineNuxtConfig({
       'LoadingBar',
       'Notify',
     ],
+    sassVariables: true,
     iconSet: {
       ...materialIcons,
       colorPicker: materialIconsRound.colorPicker,
@@ -24,13 +26,36 @@ export default defineNuxtConfig({
       fontIcons: ['material-icons'],
       animations: 'all',
     },
+    appConfigKey: 'nuxtQuasarCustom',
     config: {
       dark: true,
+      brand: {
+        primary: '#ff0000',
+      },
     },
     components: {
       defaults: {
         QBtn: {
-          glossy: true,
+          color: 'primary',
+        },
+        QLinearProgress: {
+          color: 'green',
+          size: '15px',
+          stripe: true,
+        },
+        QCircularProgress: {
+          color: 'blue',
+          indeterminate: true,
+        },
+        QSelect: {
+          outlined: true,
+          dense: true,
+        },
+        QInput: {
+          outlined: true,
+        },
+        QToggle: {
+          color: 'red',
         },
       },
     },

playground/pages/index.vue

@@ -103,7 +103,6 @@ const buttons: QBtnProps[] = [
         :key="idx"
       >
         <q-btn
-          color="primary"
           v-bind="button"
         />
       </q-item>
@@ -112,5 +111,9 @@ const buttons: QBtnProps[] = [
       Directive Showcase
     </p>
     <example-list />
+    <p class="text-h6 q-pt-md">
+      Quasar Default Prop Values
+    </p>
+    <prop-defaults />
   </q-page>
 </template>

playground/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}