nuxt-loaders 1.1.2 → 1.1.4

package/LICENSE

@@ -1,21 +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.
+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

@@ -1,124 +1,124 @@
-<!--
-Get your module up and running quickly.
-
-Find and replace all on all files (CMD+SHIFT+F):
-- Name: Nuxt Loaders
-- Package name: nuxt-loaders
-- Description: Simple loading screen engine for Nuxt 4+
--->
-
-# 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]
-
-Simple loading screen engine for Nuxt 4+.
-
-- [✨ &nbsp;Release Notes](/CHANGELOG.md)
-  <!-- - [🏀 Online playground](https://stackblitz.com/github/haileabt/nuxt-loaders?file=playground%2Fapp.vue) -->
-  <!-- - [📖 &nbsp;Documentation](https://example.com) -->
-
-## Features
-
-- 🔄 **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
-
-1. Add `nuxt-loaders` dependency to your project
-
-```bash
-npx nuxi module add nuxt-loaders
-```
-
-2. Add `nuxt-loaders` to the `modules` section of `nuxt.config.ts`
-
-```ts
-export default defineNuxtConfig({
-  modules: ["nuxt-loaders"],
-});
-```
-
-That's it! You can now use Nuxt Loaders in your Nuxt app ✨
-
-## Configuration
-
-You can configure the module in your `nuxt.config.ts`:
-
-```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`.
-
-    ```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`):
-
-```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
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: Nuxt Loaders
+- Package name: nuxt-loaders
+- Description: Simple loading screen engine for Nuxt 4+
+-->
+
+# 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]
+
+Simple loading screen engine for Nuxt 4+.
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+  <!-- - [🏀 Online playground](https://stackblitz.com/github/haileabt/nuxt-loaders?file=playground%2Fapp.vue) -->
+  <!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+- 🔄 **Automatic Loader Registration**: Automatically registers loader components from your specified directory as global components.
+- 🛣️ **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 is fully customizable.
+
+## Quick Setup
+
+1. Add `nuxt-loaders` dependency to your project:
+
+```bash
+npx nuxi module add nuxt-loaders
+```
+
+2. Add `nuxt-loaders` to the `modules` section of `nuxt.config.ts` (if not already added by nuxi):
+
+```ts
+export default defineNuxtConfig({
+  modules: ["nuxt-loaders"],
+});
+```
+
+That's it! You can now use Nuxt Loaders in your Nuxt app ✨
+
+## Configuration
+
+You can configure the module in your `nuxt.config.ts`. The components in `loadersDir` will be automatically imported and can be referenced by name in `routeRules`.
+
+```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`.
+
+    ```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`):
+
+```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/bin/loaders.mjs

@@ -102,7 +102,7 @@ const handleAddLoader = async (slug, loadersConfig, index) => {
   }
   const loadersPath = join(process.cwd(), loadersConfig.loadersDir);
   if (!existsSync(loadersPath)) {
-    mkdirSync(loadersPath);
+    mkdirSync(loadersPath, { recursive: true });
     logInfoCli(`Created loaders directory at ${loadersPath}`);
   }
   const loader = loadersConfig.installedLoaders[slug];

package/dist/module.json

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

package/dist/runtime/components/DefaultLoader.vue

@@ -1,7 +1,7 @@
 <template>
-    <div :class="['loader', className]">
-        <h1>Loading{{ dots }}</h1>
-    </div>
+    <div :class="['loader', className]">
+        <h1>Loading{{ dots }}</h1>
+    </div>
 </template>
 
 <script setup>

package/dist/runtime/components/Loader.vue

@@ -1,5 +1,10 @@
 <template>
-  <div :class="[className, 'w-[100vw] h-[100svh] absolute top-0 left-0 z-50 grid place-items-center bg-white']">
+  <div
+    :class="[
+  className,
+  'w-screen h-svh fixed top-0 left-0 z-50 grid place-items-center bg-black'
+]"
+  >
     <component :is="loaderName" />
   </div>
 </template>

package/dist/runtime/server/tsconfig.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-loaders",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Simple loading screen engine for Nuxt 4+",
   "repository": "haileabt/nuxt-loaders",
   "license": "MIT",
@@ -23,6 +23,14 @@
   "files": [
     "dist"
   ],
+  "keywords": [
+    "nuxt",
+    "nuxt 4",
+    "nuxt-loaders",
+    "loaders",
+    "loading screens",
+    "vue"
+  ],
   "bin": {
     "loaders": "./dist/bin/loaders.mjs"
   },