nuxt-loaders 1.0.0 → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Haileab Tesfaye
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -2,83 +2,123 @@
 Get your module up and running quickly.
 
 Find and replace all on all files (CMD+SHIFT+F):
-- Name: My Module
-- Package name: my-module
-- Description: My new Nuxt module
+- Name: Nuxt Loaders
+- Package name: nuxt-loaders
+- Description: Simple loading screen engine for Nuxt 4+
 -->
 
-# My Module
+# Nuxt Loaders
 
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-My new Nuxt module for doing amazing things.
+Simple loading screen engine for Nuxt 4+.
 
 - [✨  Release Notes](/CHANGELOG.md)
-<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
-<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+  <!-- - [🏀 Online playground](https://stackblitz.com/github/haileabt/nuxt-loaders?file=playground%2Fapp.vue) -->
+  <!-- - [📖 &nbsp;Documentation](https://example.com) -->
 
 ## Features
 
-<!-- Highlight some of the features your module provide here -->
-- ⛰ &nbsp;Foo
-- 🚠 &nbsp;Bar
-- 🌲 &nbsp;Baz
+- 🔄 **Automatic Loader Registration**: Automatically registers loader components from your specified directory.
+- 🛣️ **Route-based Configuration**: Assign specific loaders to different routes using `routeRules`.
+- 🎨 **TailwindCSS Integration**: Includes TailwindCSS support out of the box.
+- ⚡ **Zero Configuration**: Works with sensible defaults, but fully customizable.
 
 ## Quick Setup
 
-Install the module to your Nuxt application with one command:
+1. Add `nuxt-loaders` dependency to your project
 
 ```bash
-npx nuxi module add my-module
+npx nuxi module add nuxt-loaders
 ```
 
-That's it! You can now use My Module in your Nuxt app ✨
+2. Add `nuxt-loaders` to the `modules` section of `nuxt.config.ts`
 
+```ts
+export default defineNuxtConfig({
+  modules: ["nuxt-loaders"],
+});
+```
 
-## Contribution
+That's it! You can now use Nuxt Loaders in your Nuxt app ✨
 
-<details>
-  <summary>Local development</summary>
-  
-  ```bash
-  # Install dependencies
-  npm install
-  
-  # Generate type stubs
-  npm run dev:prepare
-  
-  # Develop with the playground
-  npm run dev
-  
-  # Build the playground
-  npm run dev:build
-  
-  # Run ESLint
-  npm run lint
-  
-  # Run Vitest
-  npm run test
-  npm run test:watch
-  
-  # Release new version
-  npm run release
-  ```
-
-</details>
+## Configuration
 
+You can configure the module in your `nuxt.config.ts`:
 
-<!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-version-href]: https://npmjs.com/package/my-module
+```ts
+export default defineNuxtConfig({
+  modules: ["nuxt-loaders"],
+  loaders: {
+    // Directory containing your loader components
+    // Default: 'app/components/loaders'
+    loadersDir: "app/components/loaders",
+
+    // Automatically setup the module
+    // Default: true
+    autoSetup: true,
+
+    // Define rules for which loader to use on which route
+    routeRules: {
+      "/": "MyLoader",
+      "/admin/*": "AdminLoader",
+    },
+  },
+});
+```
+
+### Options
+
+| Option       | Type                     | Default                    | Description                                         |
+| ------------ | ------------------------ | -------------------------- | --------------------------------------------------- |
+| `loadersDir` | `string`                 | `'app/components/loaders'` | Directory where your loader components are located. |
+| `autoSetup`  | `boolean`                | `true`                     | Whether to automatically setup the module.          |
+| `routeRules` | `Record<string, string>` | `{}`                       | Map of route patterns to loader component names.    |
+
+## Usage
+
+1.  **Add the Loader Component**:
+    Add the `<Loader />` component to your `app.vue` (or layout) and control its visibility using `useLoader`.
 
-[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-downloads-href]: https://npm.chart.dev/my-module
+    ```vue
+    <script setup lang="ts">
+    const { isLoading } = useLoader();
+    </script>
 
-[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
-[license-href]: https://npmjs.com/package/my-module
+    <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`):
+
+```vue
+<template>
+  <div class="loader">Loading...</div>
+</template>
+```
+
+## Contribution
+
+Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
+
+<!-- Badges -->
 
+[npm-version-src]: https://img.shields.io/npm/v/nuxt-loaders/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/nuxt-loaders
+[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-loaders.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/nuxt-loaders
+[license-src]: https://img.shields.io/npm/l/nuxt-loaders.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/nuxt-loaders
 [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
 [nuxt-href]: https://nuxt.com

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.0",
+  "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,8 +1,8 @@
 {
   "name": "nuxt-loaders",
-  "version": "1.0.0",
-  "description": "My new Nuxt module",
-  "repository": "your-org/my-module",
+  "version": "1.1.0",
+  "description": "Simple loading screen engine for Nuxt 4+",
+  "repository": "haileabt/nuxt-loaders",
   "license": "MIT",
   "type": "module",
   "exports": {