@falcondev-oss/nuxt-layers-base 0.2.2 → 0.4.1

package/app/app.config.ts

@@ -1,7 +1,9 @@
 export default defineAppConfig({
   ui: {
     colors: {
-      neutral: 'gray',
+      primary: 'brand-primary',
+      secondary: 'brand-secondary',
+      neutral: 'slate',
     },
   },
 })

package/app/assets/css/base.css

@@ -1,6 +1,9 @@
 @import 'tailwindcss';
 @import '@nuxt/ui';
 
+@import './theme.css';
+@import './utilities.css';
+
 @layer base {
   html,
   body,

package/app/assets/css/theme.css

@@ -0,0 +1,31 @@
+@theme static {
+  --color-brand-primary-50: color-mix(in oklch, var(--color-brand-primary) 8%, white);
+  --color-brand-primary-100: color-mix(in oklch, var(--color-brand-primary) 16%, white);
+  --color-brand-primary-200: color-mix(in oklch, var(--color-brand-primary) 30%, white);
+  --color-brand-primary-300: color-mix(in oklch, var(--color-brand-primary) 50%, white);
+  --color-brand-primary-400: color-mix(in oklch, var(--color-brand-primary) 80%, white);
+  --color-brand-primary-500: var(--color-brand-primary);
+  --color-brand-primary-600: color-mix(in oklch, var(--color-brand-primary), black 16%);
+  --color-brand-primary-700: color-mix(in oklch, var(--color-brand-primary), black 30%);
+  --color-brand-primary-800: color-mix(in oklch, var(--color-brand-primary), black 42%);
+  --color-brand-primary-900: color-mix(in oklch, var(--color-brand-primary), black 55%);
+  --color-brand-primary-950: color-mix(in oklch, var(--color-brand-primary), black 64%);
+
+  --color-brand-secondary-50: color-mix(in oklch, var(--color-brand-secondary) 8%, white);
+  --color-brand-secondary-100: color-mix(in oklch, var(--color-brand-secondary) 16%, white);
+  --color-brand-secondary-200: color-mix(in oklch, var(--color-brand-secondary) 30%, white);
+  --color-brand-secondary-300: color-mix(in oklch, var(--color-brand-secondary) 50%, white);
+  --color-brand-secondary-400: color-mix(in oklch, var(--color-brand-secondary) 80%, white);
+  --color-brand-secondary-500: var(--color-brand-secondary);
+  --color-brand-secondary-600: color-mix(in oklch, var(--color-brand-secondary), black 16%);
+  --color-brand-secondary-700: color-mix(in oklch, var(--color-brand-secondary), black 30%);
+  --color-brand-secondary-800: color-mix(in oklch, var(--color-brand-secondary), black 42%);
+  --color-brand-secondary-900: color-mix(in oklch, var(--color-brand-secondary), black 55%);
+  --color-brand-secondary-950: color-mix(in oklch, var(--color-brand-secondary), black 64%);
+
+  --color-slate-*: initial;
+  --color-gray-*: initial;
+  --color-zinc-*: initial;
+  --color-neutral-*: initial;
+  --color-stone-*: initial;
+}

package/app/components/u/UCustomApp.vue

@@ -13,8 +13,11 @@ const config = useRuntimeConfig()
 
 <template>
   <UApp v-bind="forwarded.app" :nonce="config.public.projectId">
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
+    <NuxtLoadingIndicator color="var(--color-brand-secondary, var(--color-brand-primary))" />
+    <Suspense>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </Suspense>
   </UApp>
 </template>

package/app/utils/plugins.ts

@@ -7,6 +7,7 @@ import {
   hydrate,
   MutationCache,
   QueryClient,
+  useIsFetching,
   useQueryClient,
   VueQueryPlugin,
 } from '@tanstack/vue-query'
@@ -83,6 +84,23 @@ export function vueQueryPlugin(opts?: VueQueryNuxtPluginOptions) {
           hydrate(queryClient, vueQueryState.value)
         })
       }
+
+      // global nuxt loading indicator
+      const loadingIndicator = useLoadingIndicator()
+      const isFetching = useIsFetching()
+
+      let timeout: ReturnType<typeof setTimeout> | null = null
+      watch(isFetching, () => {
+        if (isFetching.value > 0) {
+          loadingIndicator.start()
+          timeout = setTimeout(() => {
+            loadingIndicator.set(0)
+          }, 300)
+        } else {
+          if (timeout) clearTimeout(timeout)
+          loadingIndicator.finish()
+        }
+      })
     },
   } satisfies ObjectPlugin
 }

package/nuxt.config.ts

@@ -20,7 +20,16 @@ export default defineNuxtConfig({
     strict: true,
   },
   nitro: {
+    experimental: {
+      tasks: true,
+    },
     typescript: {
+      tsConfig: {
+        compilerOptions: {
+          noImplicitOverride: true,
+          noUncheckedIndexedAccess: true,
+        },
+      },
       strict: true,
     },
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.4.1",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": "github:falcondev-oss/nuxt-layers",
@@ -13,7 +13,7 @@
     "node": "24",
     "pnpm": "10"
   },
-  "dependencies": {
+  "peerDependencies": {
     "@falcondev-oss/form-core": "^0.18.5",
     "@falcondev-oss/form-vue": "^0.18.5",
     "@falcondev-oss/trpc-vue-query": "^0.5.2",
@@ -33,21 +33,21 @@
     "consola": "^3.4.2",
     "defu": "^6.1.4",
     "maska": "^3.2.0",
+    "nuxt": "^4.2.2",
     "reka-ui": "^2.7.0",
     "remeda": "^2.33.1",
     "superjson": "^2.2.6",
     "tailwindcss": "^4.1.18",
-    "trpc-nuxt": "^2.0.1"
+    "trpc-nuxt": "^2.0.1",
+    "type-fest": "^5.4.0",
+    "vue": "^3.5.26",
+    "vue-router": "^4.6.4"
   },
   "devDependencies": {
     "@falcondev-oss/configs": "^5.0.2",
     "eslint": "^9.39.2",
-    "nuxt": "^4.2.2",
     "prettier": "^3.7.4",
-    "type-fest": "^5.3.1",
     "typescript": "^5.9.3",
-    "vue": "^3.5.26",
-    "vue-router": "^4.6.4",
     "vue-tsc": "^3.2.2",
     "zod": "^4.3.5"
   },