nuxt-users 1.10.0 → 1.12.0

package/CHANGELOG.md

@@ -1,6 +1,64 @@
 # Changelog
 
 
+## v1.12.0
+
+[compare changes](https://github.com/rrd108/nuxt-users/compare/v1.11.0...v1.12.0)
+
+### 🚀 Enhancements
+
+- Enhances user management and login flow ([894563a](https://github.com/rrd108/nuxt-users/commit/894563a))
+- Implement new components ([87689c9](https://github.com/rrd108/nuxt-users/commit/87689c9))
+
+### 🩹 Fixes
+
+- Authorization middleware for API routes closes #76 ([#76](https://github.com/rrd108/nuxt-users/issues/76))
+- (temporary) strange test failing ([ff8c376](https://github.com/rrd108/nuxt-users/commit/ff8c376))
+
+### 💅 Refactors
+
+- Component names ([159f334](https://github.com/rrd108/nuxt-users/commit/159f334))
+- Css classes renamed, removed or added ([c5c3334](https://github.com/rrd108/nuxt-users/commit/c5c3334))
+- Remove unused css ([7abc8a5](https://github.com/rrd108/nuxt-users/commit/7abc8a5))
+
+### 🏡 Chore
+
+- Bump version number ([5045086](https://github.com/rrd108/nuxt-users/commit/5045086))
+
+### ✅ Tests
+
+- Fix ([cbf300c](https://github.com/rrd108/nuxt-users/commit/cbf300c))
+- Fix failing test ([3973eec](https://github.com/rrd108/nuxt-users/commit/3973eec))
+
+### ❤️ Contributors
+
+- Rrd108 ([@rrd108](https://github.com/rrd108))
+
+## v1.11.0
+
+[compare changes](https://github.com/rrd108/nuxt-users/compare/v1.9.0...v1.11.0)
+
+### 🚀 Enhancements
+
+- Add user CRUD API endpoints ([8cf5e0a](https://github.com/rrd108/nuxt-users/commit/8cf5e0a))
+- Add user API endpoints ([05f326e](https://github.com/rrd108/nuxt-users/commit/05f326e))
+
+### 💅 Refactors
+
+- API endpoints ([784dca4](https://github.com/rrd108/nuxt-users/commit/784dca4))
+
+### 🏡 Chore
+
+- **release:** V1.10.0 ([d6100db](https://github.com/rrd108/nuxt-users/commit/d6100db))
+
+### ✅ Tests
+
+- Skip for jiti error ([ce562c5](https://github.com/rrd108/nuxt-users/commit/ce562c5))
+
+### ❤️ Contributors
+
+- Rrd108 ([@rrd108](https://github.com/rrd108))
+
 ## v1.10.0
 
 [compare changes](https://github.com/rrd108/nuxt-users/compare/v1.9.0...v1.10.0)

package/dist/cli.mjs

@@ -4,8 +4,7 @@ import { defaultOptions } from './module.mjs';
 import { loadNuxt } from '@nuxt/kit';
 import { defu } from 'defu';
 import { runMigrations, createUser as createUser$1, createUsersTable as createUsersTable$1, createPersonalAccessTokensTable as createPersonalAccessTokensTable$1, createPasswordResetTokensTable as createPasswordResetTokensTable$1, createMigrationsTable as createMigrationsTable$1 } from '../dist/runtime/server/utils/index.js';
-import { g as getPasswordValidationOptions, v as validatePassword } from './shared/nuxt-users.BnOQs2LI.mjs';
-import '../dist/runtime/server/utils/user.js';
+import { getPasswordValidationOptions, validatePassword } from './utils.mjs';
 
 const getOptionsFromEnv = () => {
   const connectorName = process.env.DB_CONNECTOR || "sqlite";
@@ -248,7 +247,7 @@ const main = defineCommand({
   meta: {
     name: "nuxt-users",
     description: "CLI for Nuxt Users Module - Manage users, migrations, and database operations",
-    version: "1.9.0"
+    version: "1.11.0"
   },
   subCommands: {
     migrate,

package/dist/module.d.mts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { R as RuntimeModuleOptions, M as ModuleOptions } from './shared/nuxt-users.CXezgQLO.mjs';
+import { R as RuntimeModuleOptions, M as ModuleOptions } from './shared/nuxt-users.B5ttEpIO.mjs';
 export * from '../dist/runtime/server/utils/index.js';
 
 declare const defaultOptions: ModuleOptions;

package/dist/module.d.ts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { R as RuntimeModuleOptions, M as ModuleOptions } from './shared/nuxt-users.CXezgQLO.js';
+import { R as RuntimeModuleOptions, M as ModuleOptions } from './shared/nuxt-users.B5ttEpIO.js';
 export * from '../dist/runtime/server/utils/index.js';
 
 declare const defaultOptions: ModuleOptions;

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "nuxt-users",
   "configKey": "nuxtUsers",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "builder": {
-    "@nuxt/module-builder": "1.0.1",
+    "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"
   }
 }

package/dist/module.mjs

@@ -9,6 +9,7 @@ const defaultOptions = {
       path: "./data/users.sqlite3"
     }
   },
+  apiBasePath: "/api/nuxt-users",
   tables: {
     migrations: "migrations",
     users: "users",
@@ -59,6 +60,7 @@ const module = defineNuxtModule({
     const runtimeConfigOptions = defu(options, nuxt.options.runtimeConfig.nuxtUsers || {}, defaultOptions);
     nuxt.options.runtimeConfig.nuxtUsers = {
       ...runtimeConfigOptions,
+      apiBasePath: options.apiBasePath || defaultOptions.apiBasePath,
       tables: {
         migrations: options.tables?.migrations || defaultOptions.tables.migrations,
         users: options.tables?.users || defaultOptions.tables.users,
@@ -84,7 +86,8 @@ const module = defineNuxtModule({
       auth: {
         whitelist: [...defaultOptions.auth?.whitelist || [], ...options.auth?.whitelist || []],
         permissions: options.auth?.permissions || defaultOptions.auth.permissions
-      }
+      },
+      apiBasePath: options.apiBasePath || defaultOptions.apiBasePath
     };
     addPlugin({
       src: resolver.resolve("./runtime/plugin"),
@@ -96,53 +99,59 @@ const module = defineNuxtModule({
       path: resolver.resolve("./runtime/middleware/authorization.client"),
       global: true
     });
+    const base = nuxt.options.runtimeConfig.nuxtUsers.apiBasePath || defaultOptions.apiBasePath;
     addServerHandler({
-      route: "/api/auth/login",
+      route: `${base}/session`,
       method: "post",
-      handler: resolver.resolve("./runtime/server/api/auth/login.post")
+      handler: resolver.resolve("./runtime/server/api/nuxt-users/session/index.post")
     });
     addServerHandler({
-      route: "/api/auth/forgot-password",
-      method: "post",
-      handler: resolver.resolve("./runtime/server/api/auth/forgot-password.post")
+      route: `${base}/session`,
+      method: "delete",
+      handler: resolver.resolve("./runtime/server/api/nuxt-users/session/index.delete")
     });
     addServerHandler({
-      route: "/api/auth/reset-password",
-      method: "post",
-      handler: resolver.resolve("./runtime/server/api/auth/reset-password.post")
+      route: `${base}/me`,
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/nuxt-users/me.get")
     });
     addServerHandler({
-      route: "/api/auth/logout",
-      method: "get",
-      handler: resolver.resolve("./runtime/server/api/auth/logout.get")
+      route: `${base}/password`,
+      method: "patch",
+      handler: resolver.resolve("./runtime/server/api/nuxt-users/password/index.patch")
     });
     addServerHandler({
-      route: "/api/nuxt-users/profile",
-      method: "get",
-      handler: resolver.resolve("./runtime/server/api/nuxt-users/profile.get")
+      route: `${base}/password/forgot`,
+      method: "post",
+      handler: resolver.resolve("./runtime/server/api/nuxt-users/password/forgot.post")
     });
     addServerHandler({
-      route: "/api/auth/update-password",
+      route: `${base}/password/reset`,
       method: "post",
-      handler: resolver.resolve("./runtime/server/api/auth/update-password.post")
+      handler: resolver.resolve("./runtime/server/api/nuxt-users/password/reset.post")
     });
     addServerHandler({
-      route: "/api/nuxt-users",
+      route: `${base}`,
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/nuxt-users/index.get")
+    });
+    addServerHandler({
+      route: `${base}`,
       method: "post",
       handler: resolver.resolve("./runtime/server/api/nuxt-users/index.post")
     });
     addServerHandler({
-      route: "/api/nuxt-users/:id",
+      route: `${base}/:id`,
       method: "get",
       handler: resolver.resolve("./runtime/server/api/nuxt-users/[id].get")
     });
     addServerHandler({
-      route: "/api/nuxt-users/:id",
+      route: `${base}/:id`,
       method: "patch",
       handler: resolver.resolve("./runtime/server/api/nuxt-users/[id].patch")
     });
     addServerHandler({
-      route: "/api/nuxt-users/:id",
+      route: `${base}/:id`,
       method: "delete",
       handler: resolver.resolve("./runtime/server/api/nuxt-users/[id].delete")
     });
@@ -176,23 +185,39 @@ const module = defineNuxtModule({
       nitroConfig.scanDirs.push(resolver.resolve("./runtime/server/tasks"));
     });
     addComponent({
-      name: "LoginForm",
-      filePath: resolver.resolve("./runtime/components/LoginForm.vue")
+      name: "NUsersLoginForm",
+      filePath: resolver.resolve("./runtime/components/NUsersLoginForm.vue")
+    });
+    addComponent({
+      name: "NUsersLogoutLink",
+      filePath: resolver.resolve("./runtime/components/NUsersLogoutLink.vue")
+    });
+    addComponent({
+      name: "NUsersProfileInfo",
+      filePath: resolver.resolve("./runtime/components/NUsersProfileInfo.vue")
+    });
+    addComponent({
+      name: "NUsersResetPasswordForm",
+      filePath: resolver.resolve("./runtime/components/NUsersResetPasswordForm.vue")
+    });
+    addComponent({
+      name: "NUsersPasswordStrengthIndicator",
+      filePath: resolver.resolve("./runtime/components/NUsersPasswordStrengthIndicator.vue")
     });
     addComponent({
-      name: "LogoutLink",
-      filePath: resolver.resolve("./runtime/components/LogoutLink.vue")
+      name: "NUsersList",
+      filePath: resolver.resolve("./runtime/components/NUsersList.vue")
     });
     addComponent({
-      name: "ProfileInfo",
-      filePath: resolver.resolve("./runtime/components/ProfileInfo.vue")
+      name: "NUsersUserCard",
+      filePath: resolver.resolve("./runtime/components/NUsersUserCard.vue")
     });
     addComponent({
-      name: "ResetPasswordForm",
-      filePath: resolver.resolve("./runtime/components/ResetPasswordForm.vue")
+      name: "NUsersUserForm",
+      filePath: resolver.resolve("./runtime/components/NUsersUserForm.vue")
     });
     nuxt.options.css = nuxt.options.css || [];
-    nuxt.options.css.push(resolver.resolve("./runtime/assets/colors.css"));
+    nuxt.options.css.push(resolver.resolve("./runtime/assets/nuxt-users.css"));
   }
 });
 

package/dist/runtime/assets/nuxt-users.css

@@ -0,0 +1 @@
+:root{--color-primary:#3b82f6;--color-primary-dark:#2563eb;--color-primary-light:#60a5fa;--color-secondary:#059669;--color-secondary-dark:#047857;--color-secondary-light:#10b981;--color-white:#fff;--color-black:#000;--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-success:#059669;--color-success-light:#f0fdf4;--color-success-border:#9ae6b4;--color-warning:#f59e0b;--color-warning-light:#fef3c7;--color-warning-text:#92400e;--color-error:#dc2626;--color-error-light:#fef2f2;--color-error-border:#fecaca;--color-error-alt:#db5050;--color-error-dark:#b91c1c;--color-border:#e5e7eb;--color-border-light:#d1d5db;--color-border-dark:#ccc;--color-bg-primary:#fff;--color-bg-secondary:#f9fafb;--color-bg-tertiary:#f3f4f6;--color-text-primary:#000;--color-text-secondary:#6b7280;--color-strength-weak:#dc3545;--color-strength-medium:#ffc107;--color-strength-strong:#28a745;--color-strength-unknown:#6c757d;--color-strength-bg:#e9ecef;--color-validation-passed:#28a745;--color-validation-failed:#dc3545;--color-validation-hint:#6c757d}@media (prefers-color-scheme:dark){.dark,:root{--color-primary:#60a5fa;--color-primary-dark:#3b82f6;--color-primary-light:#93c5fd;--color-secondary:#10b981;--color-secondary-dark:#059669;--color-secondary-light:#34d399;--color-white:#000;--color-black:#fff;--color-gray-50:#111827;--color-gray-100:#1f2937;--color-gray-200:#374151;--color-gray-300:#4b5563;--color-gray-400:#6b7280;--color-gray-500:#9ca3af;--color-gray-600:#d1d5db;--color-gray-700:#e5e7eb;--color-gray-800:#f3f4f6;--color-gray-900:#f9fafb;--color-success:#10b981;--color-success-light:#064e3b;--color-success-border:#065f46;--color-warning:#fbbf24;--color-warning-light:#451a03;--color-warning-text:#fef3c7;--color-error:#ef4444;--color-error-light:#450a0a;--color-error-border:#7f1d1d;--color-error-alt:#f87171;--color-error-dark:#dc2626;--color-border:#374151;--color-border-light:#4b5563;--color-border-dark:#6b7280;--color-bg-primary:#111827;--color-bg-secondary:#1f2937;--color-bg-tertiary:#374151;--color-text-primary:#fff;--color-text-secondary:#9ca3af;--color-strength-weak:#ef4444;--color-strength-medium:#fbbf24;--color-strength-strong:#22c55e;--color-strength-unknown:#9ca3af;--color-strength-bg:#374151;--color-validation-passed:#22c55e;--color-validation-failed:#ef4444;--color-validation-hint:#9ca3af}}.n-users-form-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;width:100%}.n-users-form-group.n-users-form-group-narrow{width:90%}.n-users-form-group label,.n-users-form-label{color:var(--color-text-primary,#000);display:block;font-size:1rem;font-weight:500;margin-bottom:.5rem}.n-users-form-group input,.n-users-form-group select,.n-users-form-input{border:1px solid var(--color-border,#ccc);border-radius:.25rem;font-size:1rem;padding:.5rem;transition:border-color .2s,box-shadow .2s;width:100%}.n-users-form-group input:focus,.n-users-form-group select:focus,.n-users-form-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 .1rem rgba(59,130,246,.1);outline:none}.n-users-form-group input:disabled,.n-users-form-input:disabled{background-color:var(--color-bg-secondary,#f9fafb);cursor:not-allowed}.n-users-form-group input.error,.n-users-form-input.error{border-color:var(--color-error,#dc3545)}.n-users-form-group input[type=email],.n-users-form-group input[type=password],.n-users-form-group input[type=text]{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-light);border-radius:.5em;box-sizing:border-box;color:var(--color-gray-700);font-size:.875rem;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}.n-users-form-group input[type=email]:focus,.n-users-form-group input[type=password]:focus,.n-users-form-group input[type=text]:focus{background-color:var(--color-bg-primary);border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.n-users-form-group input[type=checkbox]{margin:0;width:auto}.n-users-btn,.n-users-cancel-btn,.n-users-delete-btn,.n-users-edit-btn,.n-users-submit-btn{align-self:flex-start;border:none;border-radius:.25rem;cursor:pointer;display:inline-block;font-size:1rem;font-weight:500;padding:.5rem 1rem;text-decoration:none;transition:background-color .2s,transform .1s}.n-users-btn:hover,.n-users-edit-btn:hover,.n-users-submit-btn:hover{background-color:var(--color-primary-dark,#2563eb);transform:translateY(-1px)}.n-users-btn:disabled,.n-users-submit-btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.n-users-btn-primary,.n-users-edit-btn,.n-users-submit-btn{background-color:var(--color-primary,#3b82f6);color:#fff}.n-users-btn-secondary,.n-users-cancel-btn{background-color:var(--color-gray-500,#6b7280);color:#fff}.n-users-cancel-btn:hover{background-color:var(--color-gray-600,#4b5563)}.n-users-delete-btn{background-color:var(--color-error,#ef4444);color:#fff}.n-users-delete-btn:hover{background-color:var(--color-error-alt,#dc2626)}button[type=submit]{align-items:center;background-color:var(--color-primary);border:1px solid var(--color-primary);border-radius:.5em;color:var(--color-white);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;min-height:44px;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}button[type=submit]:hover:not(:disabled){background-color:var(--color-primary-dark);border-color:var(--color-primary-dark)}button[type=submit]:disabled{cursor:not-allowed;opacity:.6}.n-users-error-message,.n-users-error-text{background-color:var(--color-error-light,#fef2f2);border:1px solid var(--color-error-border,#fecaca);border-radius:.5rem;color:var(--color-error,#dc3545);font-size:.875rem;margin-top:.5rem;padding:.75rem 1rem}.n-users-success-message{background-color:var(--color-success-light,#f0fff4);border:1px solid var(--color-success-border,#9ae6b4);border-radius:.5rem;color:var(--color-success,#10b981);font-size:.875rem;margin-top:.5rem;padding:.75rem 1rem}.n-users-grid{display:grid;gap:1rem}.n-users-grid-2{grid-template-columns:1fr 5fr}.n-users-grid-auto{grid-template-columns:repeat(auto-fill,minmax(12em,1fr))}.n-users-form-actions{align-items:center;display:flex;gap:1rem;margin-top:1.5rem}.n-users-loading-spinner{animation:n-users-spin 1s linear infinite;border:2px solid var(--color-white,#fff);border-radius:50%;border-top:2px solid transparent;height:16px;width:16px}@keyframes n-users-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.n-users-card{background-color:var(--color-bg-primary,#fff);border:1px solid var(--color-border,#e5e7eb);border-radius:.5rem;padding:1rem}.n-users-section{margin:0 auto;max-width:42em;padding:1em}.n-users-section-header{border-bottom:.1em solid var(--color-border,#e5e7eb);margin-bottom:1rem;padding-bottom:.5rem}.n-users-form-help{color:var(--color-text-secondary,#6b7280);font-size:.75rem;margin-top:.25rem}.n-users-strength-bar{background-color:var(--color-strength-bg,#e9ecef);border-radius:2px;height:4px;margin-bottom:4px;overflow:hidden;width:100%}.n-users-strength-fill{height:100%;transition:width .3s ease,background-color .3s ease}.n-users-strength-text{font-size:.75rem;font-weight:500}.n-users-validation-container{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;margin-top:12px;padding:12px}.n-users-container-title{color:#495057;font-size:.875rem;font-weight:600;margin-bottom:8px}.n-users-list-unstyled{list-style:none;margin:0;padding-left:0}.n-users-list-item{align-items:center;display:flex;font-size:.875rem;margin-bottom:6px;transition:color .2s ease}.n-users-list-item:last-child{margin-bottom:0}.n-users-icon{font-weight:700;margin-right:8px;min-width:16px;text-align:center}.n-users-text{flex:1}.n-users-list ul{list-style:none}form{display:flex;flex-direction:column;gap:1.5rem}.n-users-login-section{background:linear-gradient(135deg,var(--color-bg-primary) 0,var(--color-bg-secondary) 100%);border:1px solid var(--color-border);border-radius:.75em;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);max-width:25rem}.n-users-login-header{margin-bottom:1em;text-align:center}.n-users-login-title{color:var(--color-gray-800);font-size:1.875rem;font-weight:700;line-height:1.2;margin:0 0 .5em}.n-users-login-subtitle{color:var(--color-gray-700);font-size:.875rem;line-height:1.5;margin:0}.n-users-remember-me{align-items:center;display:flex;gap:.5rem}.n-users-remember-me label{color:var(--color-gray-700);font-size:.875rem;margin:0}.n-users-login-footer{margin-top:1em;text-align:center}.n-users-forgot-password{margin:0}.n-users-forgot-link{align-items:center;color:var(--color-primary);display:inline-flex;font-size:.875rem;gap:.5rem;text-decoration:none;transition:color .2s ease-in-out}.n-users-forgot-link:hover:not(.loading){color:var(--color-primary-dark);text-decoration:underline}.n-users-forgot-link.loading{cursor:not-allowed;opacity:.6;pointer-events:none}.n-users-password-strength{margin-top:8px}.n-users-validation-rules{margin-top:12px}.n-users-rules-title{margin-bottom:8px}.n-users-rules-list{padding-left:0}.n-users-rule-item{margin-bottom:6px}.n-users-rule-item:last-child{margin-bottom:0}.n-users-rule-passed{color:var(--color-validation-passed,#28a745)}.n-users-rule-failed{color:var(--color-validation-failed,#dc3545)}.n-users-rule-icon{margin-right:8px}.n-users-rule-text{flex:1}.n-users-validation-errors{margin-top:8px}.n-users-error-text:last-child{margin-bottom:0}.n-users-password-hints{margin-top:8px}.n-users-hint-title{margin-bottom:8px}.n-users-hint-list{padding-left:16px}.n-users-hint-item{color:var(--color-validation-hint,#6c757d);margin-bottom:4px}.n-users-hint-item:last-child{margin-bottom:0}.n-users-logout-link{background:var(--color-error);border:2px solid transparent;border-color:var(--color-error-dark);border-radius:.5em;color:#fff;padding:.5em 1em;text-decoration:none}.n-users-logout-link:hover{border-color:var(--color-primary)}.n-users-user-card dd{margin:0}.n-users-user-card-actions{display:flex;gap:.5rem;margin-top:1rem}.n-users-user-form{margin:0 auto;max-width:500px}.n-users-form-group input.error{border-color:#dc3545}.n-users-profile-info{background-color:var(--color-bg-primary);border-top-left-radius:.5em;border-top-right-radius:.5em}.n-users-profile-details{font-size:1rem;list-style:none;margin:0;padding:0}.n-users-reset-password-container{background-color:var(--color-bg-primary);border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}@media (max-width:480px){.n-users-login-title{font-size:1.5rem}}

package/dist/runtime/components/NUsersList.vue

@@ -0,0 +1,136 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRuntimeConfig } from "#imports";
+import { defaultDisplayFields, defaultFieldLabels } from "../../types";
+defineProps({
+  displayFields: { type: Array, required: false, default: () => defaultDisplayFields },
+  fieldLabels: { type: Object, required: false, default: () => defaultFieldLabels }
+});
+defineEmits(["editClick", "delete"]);
+const { public: { nuxtUsers } } = useRuntimeConfig();
+const users = ref([]);
+const pagination = ref(null);
+const loading = ref(false);
+const error = ref(null);
+const fetchUsers = async (page = 1, limit = 100) => {
+  loading.value = true;
+  error.value = null;
+  try {
+    const response = await $fetch(`${nuxtUsers.apiBasePath}?page=${page}&limit=${limit}`);
+    users.value = response.users;
+    pagination.value = response.pagination;
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : "Failed to fetch users";
+  } finally {
+    loading.value = false;
+  }
+};
+const refresh = () => {
+  fetchUsers();
+};
+defineExpose({
+  refresh
+});
+onMounted(() => {
+  fetchUsers();
+});
+</script>
+
+<template>
+  <div class="n-users-list">
+    <slot name="title">
+      <h2>
+        Users List
+      </h2>
+    </slot>
+
+    <slot
+      name="loading"
+      :loading="loading"
+    >
+      <div v-if="loading">
+        Loading users...
+      </div>
+    </slot>
+
+    <slot
+      name="error"
+      :error="error"
+    >
+      <div v-if="error">
+        Error: {{ error }}
+      </div>
+    </slot>
+
+    <slot name="noUsers">
+      <div v-if="users.length === 0">
+        No users found
+      </div>
+    </slot>
+
+    <div v-if="users.length">
+      <slot name="usersList">
+        <ul class="n-users-grid n-users-grid-auto">
+          <li
+            v-for="(user, index) in users"
+            :key="user.id"
+          >
+            <slot
+              name="user"
+              :user="user"
+              :index="index"
+            >
+              <NUsersUserCard
+                :user="user"
+                :index="index"
+                :display-fields="displayFields"
+                :field-labels="fieldLabels"
+                @edit-click="$emit('editClick', user)"
+                @delete="$emit('delete', user)"
+              />
+            </slot>
+          </li>
+        </ul>
+      </slot>
+
+      <slot
+        name="paginationInfo"
+        :pagination="pagination"
+      >
+        <div v-if="pagination && pagination.totalPages > 1">
+          <div>
+            <span>Page {{ pagination.page }} of {{ pagination.totalPages }}</span>
+            <span>Total: {{ pagination.total }} users</span>
+          </div>
+        </div>
+      </slot>
+
+      <slot
+        name="pagination"
+        :pagination="pagination"
+        :fetch-users="fetchUsers"
+        :loading="loading"
+      >
+        <div v-if="pagination && pagination.totalPages > 1">
+          <div>
+            <button
+              v-if="pagination.hasPrev"
+              :disabled="loading"
+              @click="fetchUsers(pagination.page - 1)"
+            >
+              Previous
+            </button>
+
+            <button
+              v-if="pagination.hasNext"
+              :disabled="loading"
+              @click="fetchUsers(pagination.page + 1)"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,74 @@
+import { type DisplayFieldsProps, type User } from '../../types.js';
+declare var __VLS_1: {}, __VLS_3: {
+    loading: boolean;
+}, __VLS_5: {
+    error: string | null;
+}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {
+    user: {
+        id: number;
+        email: string;
+        name: string;
+        password: string;
+        role: string;
+        created_at: string;
+        updated_at: string;
+        last_login_at?: string | undefined;
+    };
+    index: number;
+}, __VLS_22: {
+    pagination: {
+        page: number;
+        limit: number;
+        total: number;
+        totalPages: number;
+        hasNext: boolean;
+        hasPrev: boolean;
+    } | null;
+}, __VLS_24: {
+    pagination: {
+        page: number;
+        limit: number;
+        total: number;
+        totalPages: number;
+        hasNext: boolean;
+        hasPrev: boolean;
+    } | null;
+    fetchUsers: (page?: number, limit?: number) => Promise<void>;
+    loading: boolean;
+};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    loading?: (props: typeof __VLS_3) => any;
+} & {
+    error?: (props: typeof __VLS_5) => any;
+} & {
+    noUsers?: (props: typeof __VLS_7) => any;
+} & {
+    usersList?: (props: typeof __VLS_9) => any;
+} & {
+    user?: (props: typeof __VLS_11) => any;
+} & {
+    paginationInfo?: (props: typeof __VLS_22) => any;
+} & {
+    pagination?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<DisplayFieldsProps, {
+    refresh: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (user: User) => void;
+    editClick: (user: User) => void;
+}, string, import("vue").PublicProps, Readonly<DisplayFieldsProps> & Readonly<{
+    onDelete?: ((user: User) => any) | undefined;
+    onEditClick?: ((user: User) => any) | undefined;
+}>, {
+    displayFields: string[];
+    fieldLabels: Record<string, string>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/{LoginForm.vue → NUsersLoginForm.vue}

@@ -1,15 +1,17 @@
 <script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { navigateTo } from "#app";
 import { useRuntimeConfig } from "#imports";
 const { public: { nuxtUsers } } = useRuntimeConfig();
 const { passwordValidation } = nuxtUsers;
 const props = defineProps({
-  apiEndpoint: { type: String, required: false, default: "/api/auth/login" },
-  redirectTo: { type: String, required: false, default: "/" },
-  forgotPasswordEndpoint: { type: String, required: false, default: "/api/auth/forgot-password" }
+  apiEndpoint: { type: String, required: false },
+  redirectTo: { type: String, required: false },
+  forgotPasswordEndpoint: { type: String, required: false }
 });
 const emit = defineEmits(["success", "error", "forgot-password-error", "submit", "forgot-password-success"]);
+const apiEndpoint = computed(() => props.apiEndpoint || `${nuxtUsers?.apiBasePath}/session`);
+const forgotPasswordEndpoint = computed(() => props.forgotPasswordEndpoint || `${nuxtUsers?.apiBasePath}/password/forgot`);
 const isLoading = ref(false);
 const isForgotPasswordLoading = ref(false);
 const error = ref("");
@@ -24,7 +26,7 @@ const handleSubmit = async () => {
   error.value = "";
   try {
     emit("submit", formData.value);
-    const response = await $fetch(props.apiEndpoint, {
+    const response = await $fetch(apiEndpoint.value, {
       method: "POST",
       body: {
         email: formData.value.email,
@@ -52,7 +54,7 @@ const handleForgotPassword = async () => {
   forgotPasswordMessage.value = "";
   error.value = "";
   try {
-    const response = await $fetch(props.forgotPasswordEndpoint, {
+    const response = await $fetch(forgotPasswordEndpoint.value, {
       method: "POST",
       body: {
         email: formData.value.email
@@ -71,15 +73,15 @@ const handleForgotPassword = async () => {
 </script>
 
 <template>
-  <section>
+  <section class="n-users-login-section n-users-section">
     <form @submit.prevent="handleSubmit">
       <!-- Header slot -->
       <slot name="header">
-        <div class="login-header">
-          <h2 class="login-title">
+        <div class="n-users-login-header">
+          <h2 class="n-users-login-title">
             Welcome Back
           </h2>
-          <p class="login-subtitle">
+          <p class="n-users-login-subtitle">
             Sign in to your account
           </p>
         </div>
@@ -87,7 +89,7 @@ const handleForgotPassword = async () => {
 
       <!-- Email field -->
       <slot name="email-field">
-        <div class="form-group">
+        <div class="n-users-form-group">
           <label for="email">Email</label>
           <input
             id="email"
@@ -102,7 +104,7 @@ const handleForgotPassword = async () => {
 
       <!-- Password field -->
       <slot name="password-field">
-        <div class="form-group">
+        <div class="n-users-form-group">
           <label for="password">Password</label>
           <input
             id="password"
@@ -118,7 +120,7 @@ const handleForgotPassword = async () => {
 
       <!-- Remember me slot -->
       <slot name="remember-me">
-        <div class="remember-me">
+        <div class="n-users-remember-me">
           <input
             id="rememberMe"
             v-model="formData.rememberMe"
@@ -137,7 +139,7 @@ const handleForgotPassword = async () => {
         >
           <span
             v-if="isLoading"
-            class="loading-spinner"
+            class="n-users-loading-spinner"
           />
           {{ isLoading ? "Signing in..." : "Sign In" }}
         </button>
@@ -145,17 +147,17 @@ const handleForgotPassword = async () => {
 
       <!-- Footer slot -->
       <slot name="footer">
-        <div class="login-footer">
-          <p class="forgot-password">
+        <div class="n-users-login-footer">
+          <p class="n-users-forgot-password">
             <a
               href="#"
-              class="forgot-link"
+              class="n-users-forgot-link"
               :class="{ loading: isForgotPasswordLoading }"
               @click.prevent="handleForgotPassword"
             >
               <span
                 v-if="isForgotPasswordLoading"
-                class="loading-spinner"
+                class="n-users-loading-spinner"
               />
               {{ isForgotPasswordLoading ? "Sending..." : "Forgot your password?" }}
             </a>
@@ -191,7 +193,3 @@ const handleForgotPassword = async () => {
     </form>
   </section>
 </template>
-
-<style scoped>
-section{background:linear-gradient(135deg,var(--color-bg-primary) 0,var(--color-bg-secondary) 100%);border:1px solid var(--color-border);border-radius:.75em;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);margin:0 auto;max-width:25rem;padding:1em}form{gap:1.5rem}.form-group,form{display:flex;flex-direction:column}label{display:block;font-weight:500;margin-bottom:.5em}input[type=email],input[type=password],label{color:var(--color-gray-700);font-size:.875rem}input[type=email],input[type=password]{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-light);border-radius:.5em;box-sizing:border-box;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}input[type=email]:focus,input[type=password]:focus{background-color:var(--color-bg-primary);border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.login-header{margin-bottom:1em;text-align:center}.login-title{color:var(--color-gray-800);font-size:1.875rem;font-weight:700;line-height:1.2;margin:0 0 .5em}.login-subtitle{color:var(--color-gray-500);font-size:.875rem;line-height:1.5;margin:0}.remember-me{align-items:center;display:flex;gap:.5rem}input[type=checkbox]{margin:0;width:auto}.remember-me label{color:var(--color-gray-700);font-size:.875rem;margin:0}button[type=submit]{align-items:center;background-color:var(--color-primary);border:1px solid var(--color-primary);border-radius:.5em;color:var(--color-white);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;min-height:44px;padding:.75em 1em;transition:all .2s ease-in-out;width:100%}button[type=submit]:hover:not(:disabled){background-color:var(--color-primary-dark);border-color:var(--color-primary-dark)}button[type=submit]:disabled{cursor:not-allowed;opacity:.6}.loading-spinner{animation:spin 1s linear infinite;border:2px solid var(--color-white);border-radius:50%;border-top:2px solid transparent;height:16px;width:16px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.login-footer{margin-top:1em;text-align:center}.forgot-password{margin:0}.forgot-link{align-items:center;color:var(--color-primary);display:inline-flex;font-size:.875rem;gap:.5rem;text-decoration:none;transition:color .2s ease-in-out}.forgot-link:hover:not(.loading){color:var(--color-primary-dark);text-decoration:underline}.forgot-link.loading{cursor:not-allowed;opacity:.6;pointer-events:none}.error-message{background-color:var(--color-error-light);border:1px solid var(--color-error-border);border-radius:.5em;color:var(--color-error)}.error-message,.success-message{font-size:.875rem;margin-top:1em;padding:.75em 1em;text-align:center}.success-message{background-color:var(--color-success-light);border:1px solid var(--color-success-border);border-radius:.5em;color:var(--color-success)}@media (max-width:480px){.login-form-container{margin:1em;padding:1.5em}.login-title{font-size:1.5rem}}
-</style>

package/dist/runtime/components/{LoginForm.vue.d.ts → NUsersLoginForm.vue.d.ts}

@@ -22,22 +22,18 @@ type __VLS_Slots = {} & {
     'error-message'?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LoginFormProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    success: (user: UserWithoutPassword) => any;
     error: (error: string) => any;
-    "forgot-password-error": (error: string) => any;
     submit: (data: LoginFormData) => any;
+    success: (user: UserWithoutPassword) => any;
+    "forgot-password-error": (error: string) => any;
     "forgot-password-success": () => any;
 }, string, import("vue").PublicProps, Readonly<LoginFormProps> & Readonly<{
-    onSuccess?: ((user: UserWithoutPassword) => any) | undefined;
     onError?: ((error: string) => any) | undefined;
-    "onForgot-password-error"?: ((error: string) => any) | undefined;
     onSubmit?: ((data: LoginFormData) => any) | undefined;
+    onSuccess?: ((user: UserWithoutPassword) => any) | undefined;
+    "onForgot-password-error"?: ((error: string) => any) | undefined;
     "onForgot-password-success"?: (() => any) | undefined;
-}>, {
-    apiEndpoint: string;
-    redirectTo: string;
-    forgotPasswordEndpoint: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {