nuxt-loaders 1.0.1 → 1.1.0

package/README.md

@@ -64,7 +64,7 @@ export default defineNuxtConfig({
     // Define rules for which loader to use on which route
     routeRules: {
       "/": "MyLoader",
-      "/admin/**": "AdminLoader",
+      "/admin/*": "AdminLoader",
     },
   },
 });
@@ -80,9 +80,25 @@ export default defineNuxtConfig({
 
 ## Usage
 
-1. Create your loader components in `app/components/loaders` (or your configured `loadersDir`).
-2. The module will automatically register these components.
-3. Use `routeRules` in your `nuxt.config.ts` to specify which loader should be active for specific routes.
+1.  **Add the Loader Component**:
+    Add the `<Loader />` component to your `app.vue` (or layout) and control its visibility using `useLoader`.
+
+    ```vue
+    <script setup lang="ts">
+    const { isLoading } = useLoader();
+    </script>
+
+    <template>
+      <Loader v-if="isLoading" />
+      <NuxtPage />
+    </template>
+    ```
+
+2.  **Create your loader components**:
+    Place them in `app/components/loaders` (or your configured `loadersDir`).
+
+3.  **Configure Route Rules**:
+    Use `routeRules` in your `nuxt.config.ts` to specify which loader should be active for specific routes.
 
 Example loader component (`app/components/loaders/MyLoader.vue`):
 

package/dist/module.d.mts

@@ -4,6 +4,7 @@ interface ModuleOptions {
     autoSetup: boolean;
     loadersDir?: string;
     routeRules: Record<string, string>;
+    disableDefault: boolean;
     _activeLoader: string;
     _defaultLoader: string;
 }

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-loaders",
   "configKey": "loaders",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -14,7 +14,7 @@ const module$1 = defineNuxtModule({
   defaults: {
     autoSetup: true,
     routeRules: {},
-    _defaultLoader: "",
+    _defaultLoader: "DefaultLoader",
     _activeLoader: ""
   },
   async setup(options, nuxt) {
@@ -74,7 +74,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     if (options.routeRules && Object.keys(options.routeRules).length > 0) {
       nuxt.options.runtimeConfig.public.loaders._activeLoader = getDefaultLoader(validatedLoaderRules) ?? "";
     }
-    nuxt.options.runtimeConfig.public.loaders._defaultLoader = getDefaultLoader(validatedLoaderRules) ?? "";
+    nuxt.options.runtimeConfig.public.loaders._defaultLoader = getDefaultLoader(validatedLoaderRules) ?? "DefaultLoader";
     addPlugin(resolver.resolve("./runtime/plugin"));
   }
 });

package/dist/runtime/components/DefaultLoader.d.vue.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    className?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    className: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/DefaultLoader.vue

@@ -0,0 +1,20 @@
+<template>
+    <div :class="['loader', className]">
+        <h1>Loading{{ dots }}</h1>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref } from "vue";
+const dots = ref(".");
+let interval;
+onMounted(() => {
+  interval = setInterval(() => {
+    dots.value = dots.value.length >= 3 ? "." : dots.value + ".";
+  }, 500);
+});
+onUnmounted(() => clearInterval(interval));
+defineProps({
+  className: { type: String, required: false, default: "" }
+});
+</script>

package/dist/runtime/components/DefaultLoader.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    className?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    className: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Loader.d.vue.ts

@@ -1,3 +1,8 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Props = {
+    className?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    className: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Loader.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <component :is="loaderName" v-if="loaderName" />
+  <div :class="[className, 'w-[100vw] h-[100svh] absolute top-0 left-0 z-50 grid place-items-center bg-white']">
+    <component :is="loaderName" />
   </div>
 </template>
 
@@ -17,4 +17,7 @@ const loaderName = computed(() => {
   }
   return name;
 });
+defineProps({
+  className: { type: String, required: false, default: "" }
+});
 </script>

package/dist/runtime/components/Loader.vue.d.ts

@@ -1,3 +1,8 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Props = {
+    className?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    className: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/lib/utils/route-rules.d.ts

@@ -1,3 +1,3 @@
 export declare const validateLoaderRules: (routeRules: Record<string, string>) => Record<string, string>;
-export declare const getDefaultLoader: (routeRules: Record<string, string>) => string | undefined;
+export declare const getDefaultLoader: (routeRules: Record<string, string>, defaultLoaderName?: string) => string | undefined;
 export declare const getActiveLoader: (routeRules: Record<string, string>, path: string) => string | undefined;

package/dist/runtime/lib/utils/route-rules.js

@@ -13,11 +13,11 @@ const checkRoutePatternValidity = (route) => {
   if (route === "*" || route === "/") {
     return { valid: true };
   }
-  const routePattern = /^\/[\w\-/]*$/;
+  const routePattern = /^\/[\w\-/]*(?:\/\*)?$/;
   if (!routePattern.test(route)) {
     return {
       valid: false,
-      reason: "Route pattern is invalid. Must start with '/' and contain only alphanumeric characters, hyphens, underscores, or slashes."
+      reason: "Route pattern is invalid. Must start with '/' and contain only alphanumeric characters, hyphens, underscores, astrix or slashes."
     };
   }
   return { valid: true };
@@ -62,22 +62,28 @@ export const validateLoaderRules = (routeRules) => {
   });
   return newRules;
 };
-export const getDefaultLoader = (routeRules) => {
+export const getDefaultLoader = (routeRules, defaultLoaderName = "DefaultLoader") => {
   const defaultLoader = Object.keys(routeRules).filter((key) => {
     return key === "*" || key === "/";
   });
   if (defaultLoader.length <= 0) {
-    return "";
+    return defaultLoaderName;
   }
   if (defaultLoader.length > 1) {
     return routeRules["*"];
   }
-  return routeRules[defaultLoader[0]];
+  return routeRules[defaultLoader[0]] || defaultLoaderName;
 };
 export const getActiveLoader = (routeRules, path) => {
+  if (path.endsWith("/")) {
+    path = path.substring(0, -1);
+  }
   const rules = Object.keys(routeRules).filter((rule2) => {
+    if (rule2.endsWith("/")) {
+      rule2 = rule2.substring(0, -1);
+    }
     if (!path.startsWith(rule2)) return false;
-    if (!path.endsWith("*") && path != rule2) return false;
+    if (!rule2.endsWith("/*") && path != rule2) return false;
     return true;
   });
   if (rules.length <= 0) {

package/dist/runtime/tailwind.css

@@ -1 +1 @@
-@import "tailwindcss";
+@import "tailwindcss";@source "./**/*.{vue,js,ts,html}";@source "../components/**/*.{vue,js,ts}";@source "../pages/**/*.{vue,js,ts}";@source "../layouts/**/*.{vue,js,ts}";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-loaders",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Simple loading screen engine for Nuxt 4+",
   "repository": "haileabt/nuxt-loaders",
   "license": "MIT",
@@ -25,18 +25,6 @@
   "bin": {
     "loaders": "./dist/bin/loaders.mjs"
   },
-  "scripts": {
-    "prepack": "nuxt-module-build build",
-    "dev": "npm run dev:prepare && nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "cli:build": "tsc",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
-    "lint": "eslint .",
-    "test": "vitest run",
-    "test:watch": "vitest watch",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
-  },
   "dependencies": {
     "@nuxt/kit": "^4.2.1",
     "@tailwindcss/vite": "^4.1.18",
@@ -58,5 +46,15 @@
     "vitest": "^3.2.0",
     "vue-tsc": "^3.1.7"
   },
-  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
-}
+  "scripts": {
+    "dev": "npm run dev:prepare && nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "cli:build": "tsc",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  }
+}