@michael-nussbaumer/nuxt-directus 0.1.0

package/README.md

@@ -0,0 +1,222 @@
+# @michael-nussbaumer/nuxt-directus
+
+[![npm version](https://img.shields.io/npm/v/@Michael-Nussbaumer/nuxt-directus.svg)](https://www.npmjs.com/package/@michael-nussbaumer/nuxt-directus)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+A production-ready Nuxt 4 module that integrates Directus SDK with authentication, configurable global auth middleware, and automatic TypeScript type generation from Directus OpenAPI schema.
+
+## Features
+
+- ✅ **Directus SDK Integration** - Seamless integration with @directus/sdk
+- 🔐 **Authentication Composables** - Login, logout, register, verify email, and more
+- 🛡️ **Global Auth Middleware** - Configurable route protection with page meta
+- 📘 **TypeScript Type Generation** - Auto-generate types from Directus OpenAPI schema
+- ⚙️ **Flexible Configuration** - Customize behavior via module options
+- 🚀 **Nuxt 4 Ready** - Built for Nuxt 4 with full TypeScript support
+
+## Installation
+
+```bash
+pnpm add @michael-nussbaumer/nuxt-directus
+```
+
+## Quick Start
+
+### 1. Add Module to `nuxt.config.ts`
+
+```typescript
+export default defineNuxtConfig({
+    modules: ["@michael-nussbaumer/nuxt-directus"],
+
+    directus: {
+        enableGlobalMiddleware: true,
+        auth: {
+            loginPath: "/auth/login",
+            afterLoginPath: "/",
+        },
+        types: {
+            enabled: true,
+            openApiUrl: "http://directus.local/server/specs/oas",
+            output: "./schema/schema.d.ts",
+            authHeaderEnv: "DIRECTUS_OPENAPI_TOKEN",
+        },
+    },
+});
+```
+
+### 2. Set Environment Variables
+
+Create a `.env` file:
+
+```env
+DIRECTUS_URL=http://localhost:8055
+DIRECTUS_OPENAPI_TOKEN=Bearer your-token-here
+```
+
+### 3. Use Auth Composable
+
+```vue
+<script setup lang="ts">
+const { login, user, isAuthenticated, logout } = useDirectusAuth();
+
+const handleLogin = async () => {
+    await login({
+        email: "user@example.com",
+        password: "password",
+    });
+};
+</script>
+```
+
+## Page Meta Authentication
+
+Protect your routes using page meta:
+
+### Public Page
+
+```typescript
+definePageMeta({
+    auth: false,
+});
+```
+
+### Protected Page (Default)
+
+```typescript
+definePageMeta({
+    auth: true,
+});
+```
+
+### Unauthenticated Only (Login Page)
+
+```typescript
+definePageMeta({
+    auth: {
+        unauthenticatedOnly: true,
+        navigateAuthenticatedTo: "/dashboard",
+    },
+});
+```
+
+### Custom Redirects
+
+```typescript
+definePageMeta({
+    auth: {
+        navigateUnauthenticatedTo: "/custom-login",
+    },
+});
+```
+
+## Documentation
+
+Comprehensive guides for all module features:
+
+- **[Getting Started](./docs/getting-started.md)** - Installation, setup, and basic usage
+- **[Configuration](./docs/configuration.md)** - Module options and environment variables
+- **[Authentication](./docs/authentication.md)** - Login, logout, registration, and user management
+- **[API Usage](./docs/api.md)** - CRUD operations, queries, and filtering
+- **[Real-time WebSocket](./docs/realtime.md)** - Live subscriptions and event handling
+- **[Middleware](./docs/middleware.md)** - Route protection and authentication flows
+- **[Type Generation](./docs/type-generation.md)** - Automatic TypeScript types from OpenAPI schema
+
+## Quick Reference
+
+### Module Options
+
+```typescript
+{
+  enableGlobalMiddleware: true,
+  auth: {
+    loginPath: '/auth/login',
+    registerPath: '/auth/register',
+    afterLoginPath: '/',
+    afterLogoutPath: '/auth/login'
+  },
+  types: {
+    enabled: true,
+    openApiUrl: 'http://directus.local/server/specs/oas',
+    output: './schema/schema.d.ts',
+    authHeaderEnv: 'DIRECTUS_OPENAPI_TOKEN'
+  }
+}
+```
+
+### Composables
+
+#### `useDirectusAuth()`
+
+Authentication methods:
+
+- `login(credentials)` - Authenticate user
+- `logout()` - End session
+- `register(data)` - Create account
+- `fetchUser()` - Get current user
+- `verifyEmail(token)` - Verify email
+- `requestPasswordReset(email)` - Request reset
+- `resetPassword(token, password)` - Reset password
+
+#### `useDirectusApi()`
+
+API operations:
+
+- `getItems(collection, query)` - Fetch multiple items
+- `getItem(collection, id, query)` - Fetch single item
+- `createOne(collection, data)` - Create item
+- `createMany(collection, data)` - Create multiple items
+- `updateOne(collection, id, data)` - Update item
+- `updateMany(collection, ids, data)` - Update multiple items
+- `deleteOne(collection, id)` - Delete item
+- `deleteMany(collection, ids)` - Delete multiple items
+- `customRequest(method, path, options)` - Custom endpoint
+
+#### `useDirectusRealtime()`
+
+WebSocket subscriptions:
+
+- `subscribe(collection, event, callback, options)` - Listen to events
+- `unsubscribe(uid)` - Remove specific subscription
+- `unsubscribeCollection(collection)` - Remove all for collection
+- `unsubscribeAll()` - Remove all subscriptions
+
+## Development
+
+### Setup
+
+```bash
+pnpm install
+```
+
+### Development Server
+
+```bash
+pnpm run dev
+```
+
+### Build
+
+```bash
+pnpm run build
+```
+
+### Playground
+
+The module includes a playground for testing:
+
+```bash
+cd playground
+pnpm run dev
+```
+
+## License
+
+MIT License © 2026 michael-nussbaumer Communications
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Repository
+
+https://github.com/michael-nussbaumerCommunications/nuxt-directus-module

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,33 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface DirectusPermissionsConfig {
+    enabled: boolean;
+    field: string;
+    mapping?: Record<string, string>;
+    transform?: (fieldValue: any, user: any) => string | string[];
+}
+interface DirectusAuthConfig {
+    loginPath: string;
+    registerPath: string;
+    afterLoginPath: string;
+    afterLogoutPath: string;
+    resetPasswordUrl?: string;
+    verificationUrl?: string;
+    permissions?: DirectusPermissionsConfig;
+}
+interface DirectusTypesConfig {
+    enabled: boolean;
+    openApiUrl?: string;
+    output: string;
+    redoclyConfig?: string;
+    authHeaderEnv: string;
+}
+interface ModuleOptions {
+    enableGlobalMiddleware: boolean;
+    auth: DirectusAuthConfig;
+    types: DirectusTypesConfig;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { DirectusAuthConfig, DirectusPermissionsConfig, DirectusTypesConfig, ModuleOptions };

package/dist/module.d.ts

@@ -0,0 +1,33 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface DirectusPermissionsConfig {
+    enabled: boolean;
+    field: string;
+    mapping?: Record<string, string>;
+    transform?: (fieldValue: any, user: any) => string | string[];
+}
+interface DirectusAuthConfig {
+    loginPath: string;
+    registerPath: string;
+    afterLoginPath: string;
+    afterLogoutPath: string;
+    resetPasswordUrl?: string;
+    verificationUrl?: string;
+    permissions?: DirectusPermissionsConfig;
+}
+interface DirectusTypesConfig {
+    enabled: boolean;
+    openApiUrl?: string;
+    output: string;
+    redoclyConfig?: string;
+    authHeaderEnv: string;
+}
+interface ModuleOptions {
+    enableGlobalMiddleware: boolean;
+    auth: DirectusAuthConfig;
+    types: DirectusTypesConfig;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { DirectusAuthConfig, DirectusPermissionsConfig, DirectusTypesConfig, ModuleOptions };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@michael-nussbaumer/nuxt-directus",
+  "configKey": "directus",
+  "compatibility": {
+    "nuxt": "^3.0.0 || ^4.0.0"
+  },
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,50 @@
+import { defineNuxtModule, createResolver, addImportsDir, addRouteMiddleware, addPlugin } from '@nuxt/kit';
+import { defu } from 'defu';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "@michael-nussbaumer/nuxt-directus",
+    configKey: "directus",
+    compatibility: {
+      nuxt: "^3.0.0 || ^4.0.0"
+    }
+  },
+  defaults: {
+    enableGlobalMiddleware: true,
+    auth: {
+      loginPath: "/auth/login",
+      registerPath: "/auth/register",
+      afterLoginPath: "/",
+      afterLogoutPath: "/auth/login",
+      permissions: {
+        enabled: false,
+        field: "role"
+      }
+    },
+    types: {
+      enabled: false,
+      output: "./schema/schema.d.ts",
+      authHeaderEnv: "DIRECTUS_OPENAPI_TOKEN"
+    }
+  },
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.runtimeConfig.public.directus = defu(nuxt.options.runtimeConfig.public.directus, {
+      enableGlobalMiddleware: options.enableGlobalMiddleware,
+      auth: options.auth
+    });
+    nuxt.options.alias["#directus"] = resolver.resolve("./runtime");
+    addImportsDir(resolver.resolve("./runtime/composables"));
+    addRouteMiddleware({
+      name: "directus-auth",
+      path: resolver.resolve("./runtime/middleware/directus-auth"),
+      global: true
+    });
+    addPlugin(resolver.resolve("./runtime/directus"));
+    nuxt.hook("prepare:types", ({ references }) => {
+      references.push({ path: resolver.resolve("./runtime/types") });
+    });
+  }
+});
+
+export { module as default };

package/dist/runtime/composables/useDirectusApi.js

@@ -0,0 +1,96 @@
+import { useNuxtApp } from "#app";
+import { readItems, readItem, createItem, createItems, updateItem, updateItems, deleteItem, deleteItems } from "@directus/sdk";
+export const useDirectusApi = () => {
+  const { $directus } = useNuxtApp();
+  const client = $directus;
+  const getItems = async (collection, query) => {
+    try {
+      return await client.request(readItems(collection, query));
+    } catch (error) {
+      console.error(`[Directus API] Error reading items from ${collection}:`, error);
+      throw error;
+    }
+  };
+  const getItem = async (collection, id, query) => {
+    try {
+      return await client.request(readItem(collection, id, query));
+    } catch (error) {
+      console.error(`[Directus API] Error reading item ${id} from ${collection}:`, error);
+      throw error;
+    }
+  };
+  const createOne = async (collection, item) => {
+    try {
+      return await client.request(createItem(collection, item));
+    } catch (error) {
+      console.error(`[Directus API] Error creating item in ${collection}:`, error);
+      throw error;
+    }
+  };
+  const createMany = async (collection, items) => {
+    try {
+      return await client.request(createItems(collection, items));
+    } catch (error) {
+      console.error(`[Directus API] Error creating items in ${collection}:`, error);
+      throw error;
+    }
+  };
+  const updateOne = async (collection, id, item) => {
+    try {
+      return await client.request(updateItem(collection, id, item));
+    } catch (error) {
+      console.error(`[Directus API] Error updating item ${id} in ${collection}:`, error);
+      throw error;
+    }
+  };
+  const updateMany = async (collection, ids, data) => {
+    try {
+      return await client.request(updateItems(collection, ids, data));
+    } catch (error) {
+      console.error(`[Directus API] Error updating items in ${collection}:`, error);
+      throw error;
+    }
+  };
+  const deleteOne = async (collection, id) => {
+    try {
+      return await client.request(deleteItem(collection, id));
+    } catch (error) {
+      console.error(`[Directus API] Error deleting item ${id} from ${collection}:`, error);
+      throw error;
+    }
+  };
+  const deleteMany = async (collection, ids) => {
+    try {
+      return await client.request(deleteItems(collection, ids));
+    } catch (error) {
+      console.error(`[Directus API] Error deleting items from ${collection}:`, error);
+      throw error;
+    }
+  };
+  const customRequest = async (path, options) => {
+    try {
+      return await client.request(path, options);
+    } catch (error) {
+      console.error(`[Directus API] Error making custom request to ${path}:`, error);
+      throw error;
+    }
+  };
+  return {
+    // Read operations
+    getItems,
+    getItem,
+    // Create operations
+    createOne,
+    createMany,
+    // Update operations
+    updateOne,
+    updateMany,
+    // Delete operations
+    deleteOne,
+    deleteMany,
+    // Custom requests
+    customRequest,
+    // Direct client access for advanced usage
+    client
+  };
+};

package/dist/runtime/composables/useDirectusAuth.js

@@ -0,0 +1,329 @@
+import { ref, computed } from "vue";
+import { useNuxtApp, navigateTo, useRuntimeConfig, useCookie } from "#app";
+import { refresh, registerUser, registerUserVerify, passwordRequest, passwordReset, createDirectus, rest, updateMe } from "@directus/sdk";
+export const useDirectusAuth = () => {
+  const { $directus, $directusAuth, $directusWs } = useNuxtApp();
+  const config = useRuntimeConfig();
+  const isAuthenticated = computed(() => $directusAuth.isAuthenticated.value);
+  const user = computed(() => $directusAuth.currentUser.value);
+  const isLoading = ref(false);
+  const error = ref(null);
+  const login = async (credentials) => {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const client = $directus;
+      const loginData = {
+        email: credentials.email,
+        password: credentials.password
+      };
+      if (credentials.otp) {
+        loginData.otp = credentials.otp;
+      }
+      await client.login(loginData, { mode: "cookie" });
+      await $directusAuth.checkAuthStatus();
+      if (!$directusWs.isConnected.value) {
+        $directusWs.initialize();
+      }
+      const redirectCookie = useCookie("directus-auth-redirect", {
+        default: () => ""
+      });
+      const afterLoginPath = config.public.directus?.auth?.afterLoginPath || "/";
+      const redirectTo = redirectCookie.value || afterLoginPath;
+      redirectCookie.value = "";
+      await navigateTo(redirectTo);
+      return user.value;
+    } catch (e) {
+      error.value = e.message || "Login failed";
+      throw e;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  const logout = async () => {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const client = $directus;
+      const refresh_token = $directusAuth.getRefreshToken();
+      if (refresh_token) {
+        await client.logout({ mode: "cookie", refresh_token });
+      } else {
+        await client.logout({ mode: "cookie" });
+      }
+      const refreshTokenCookie = useCookie("directus_refresh_token", {
+        default: () => null,
+        secure: process.env.NODE_ENV === "production",
+        sameSite: process.env.NODE_ENV === "production" ? "strict" : "lax",
+        httpOnly: false
+      });
+      refreshTokenCookie.value = null;
+      const dataCookie = useCookie("directus-data", {
+        default: () => null
+      });
+      dataCookie.value = null;
+      await $directusAuth.checkAuthStatus();
+      const afterLogoutPath = config.public.directus?.auth?.afterLogoutPath || "/login";
+      await navigateTo(afterLogoutPath);
+    } catch (e) {
+      error.value = e.message || "Logout failed";
+      const refreshTokenCookie = useCookie("directus_refresh_token");
+      refreshTokenCookie.value = null;
+      const dataCookie = useCookie("directus-data");
+      dataCookie.value = null;
+      await $directusAuth.checkAuthStatus();
+      const afterLogoutPath = config.public.directus?.auth?.afterLogoutPath || "/login";
+      await navigateTo(afterLogoutPath);
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  const register = async (data) => {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const apiUrl = config.public.directusUrl;
+      const publicClient = createDirectus(apiUrl).with(rest());
+      const baseUrl = config.public.directus?.auth?.verificationUrl || `${window.location.origin}/auth/verify-email`;
+      await publicClient.request(
+        registerUser(data.email, data.password, {
+          first_name: data.first_name,
+          last_name: data.last_name,
+          verification_url: baseUrl
+        })
+      );
+      return true;
+    } catch (e) {
+      error.value = e.message || "Registration failed";
+      throw e;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  const verifyEmail = async (token) => {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const apiUrl = config.public.directusUrl;
+      const publicClient = createDirectus(apiUrl).with(rest());
+      await publicClient.request(registerUserVerify(token));
+      return true;
+    } catch (e) {
+      error.value = e.message || "Email verification failed";
+      throw e;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  const fetchUser = async () => {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      await $directusAuth.checkAuthStatus();
+      return user.value;
+    } catch (e) {
+      error.value = e.message || "Failed to fetch user";
+      throw e;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  const requestPasswordReset = async (email) => {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const apiUrl = config.public.directusUrl;
+      const resetUrl = config.public.directus?.auth?.resetPasswordUrl || `${window.location.origin}/auth/reset-password`;
+      const publicClient = createDirectus(apiUrl).with(rest());
+      await publicClient.request(passwordRequest(email, resetUrl));
+      return true;
+    } catch (e) {
+      error.value = e.message || "Password reset request failed";
+      throw e;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  const resetPassword = async (token, password) => {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const apiUrl = config.public.directusUrl;
+      const publicClient = createDirectus(apiUrl).with(rest());
+      await publicClient.request(passwordReset(token, password));
+      return true;
+    } catch (e) {
+      error.value = e.message || "Password reset failed";
+      throw e;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  const refreshToken = async () => {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const client = $directus;
+      await client.request(refresh({ mode: "cookie" }));
+      await $directusAuth.checkAuthStatus();
+      return true;
+    } catch (e) {
+      error.value = e.message || "Token refresh failed";
+      throw e;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  const userRoles = computed(() => {
+    if (!user.value) return [];
+    const permissionsConfig = config.public.directus?.auth?.permissions;
+    if (!permissionsConfig?.enabled) return [];
+    const roleField = permissionsConfig.field || "role";
+    let roleValue = user.value[roleField];
+    if (permissionsConfig.transform && typeof permissionsConfig.transform === "function") {
+      try {
+        roleValue = permissionsConfig.transform(roleValue, user.value);
+      } catch (e) {
+        console.error("[useDirectusAuth] Error in transform function:", e);
+      }
+    }
+    let roles;
+    if (Array.isArray(roleValue)) {
+      roles = roleValue;
+    } else if (roleValue != null) {
+      roles = [roleValue];
+    } else {
+      roles = [];
+    }
+    if (permissionsConfig.mapping) {
+      roles = roles.map((role) => permissionsConfig.mapping[role] || role);
+    }
+    return roles;
+  });
+  const userRole = computed(() => {
+    return userRoles.value[0] || null;
+  });
+  const userRoleRaw = computed(() => {
+    if (!user.value) return null;
+    const roleField = config.public.directus?.auth?.permissions?.field || "role";
+    return user.value[roleField];
+  });
+  const hasRole = (role) => {
+    return userRoles.value.includes(role);
+  };
+  const hasAnyRole = (roles) => {
+    return roles.some((role) => userRoles.value.includes(role));
+  };
+  const hasAllRoles = (roles) => {
+    return roles.every((role) => userRoles.value.includes(role));
+  };
+  const isNotRole = (roles) => {
+    return !roles.some((role) => userRoles.value.includes(role));
+  };
+  const updatePassword = async (currentPassword, newPassword) => {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const client = $directus;
+      await client.request(
+        updateMe({
+          password: newPassword
+        })
+      );
+      return true;
+    } catch (e) {
+      error.value = e.message || "Password update failed";
+      throw e;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  const generateTwoFactorSecret = async (password) => {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const client = $directus;
+      const generateTFACommand = () => () => ({
+        path: `/users/me/tfa/generate`,
+        method: "POST",
+        body: JSON.stringify({ password })
+      });
+      const result = await client.request(generateTFACommand());
+      return result;
+    } catch (e) {
+      error.value = e.message || "Failed to generate 2FA secret";
+      throw e;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  const enableTwoFactor = async (secret, otp) => {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const client = $directus;
+      const enableTFACommand = () => () => ({
+        path: `/users/me/tfa/enable`,
+        method: "POST",
+        body: JSON.stringify({ secret, otp })
+      });
+      await client.request(enableTFACommand());
+      await $directusAuth.checkAuthStatus();
+      return true;
+    } catch (e) {
+      error.value = e.message || "Failed to enable 2FA";
+      throw e;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  const disableTwoFactor = async (otp) => {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const client = $directus;
+      const disableTFACommand = () => () => ({
+        path: `/users/me/tfa/disable`,
+        method: "POST",
+        body: JSON.stringify({ otp })
+      });
+      await client.request(disableTFACommand());
+      await $directusAuth.checkAuthStatus();
+      return true;
+    } catch (e) {
+      error.value = e.message || "Failed to disable 2FA";
+      throw e;
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  const isTwoFactorEnabled = computed(() => {
+    return user.value?.tfa_secret !== null && user.value?.tfa_secret !== void 0;
+  });
+  return {
+    user,
+    isAuthenticated,
+    isLoading,
+    error,
+    login,
+    logout,
+    register,
+    verifyEmail,
+    fetchUser,
+    requestPasswordReset,
+    resetPassword,
+    refreshToken,
+    userRoles,
+    userRole,
+    userRoleRaw,
+    hasRole,
+    hasAnyRole,
+    hasAllRoles,
+    isNotRole,
+    updatePassword,
+    generateTwoFactorSecret,
+    enableTwoFactor,
+    disableTwoFactor,
+    isTwoFactorEnabled
+  };
+};

package/dist/runtime/composables/useDirectusRealtime.js

@@ -0,0 +1,125 @@
+import { ref, onUnmounted } from "vue";
+import { useNuxtApp } from "#app";
+const subscriptions = /* @__PURE__ */ new Map();
+export const useDirectusRealtime = () => {
+  const { $directus, $directusWs } = useNuxtApp();
+  const client = $directus;
+  const isConnected = computed(() => unref($directusWs.isConnected));
+  const localSubscriptions = ref(/* @__PURE__ */ new Set());
+  const subscribe = async (options, callback) => {
+    const { collection, query = {}, uid, persistent = false } = options;
+    const subscriptionId = uid || `${collection}-${JSON.stringify(query)}-${Math.random()}`;
+    if (subscriptions.has(subscriptionId)) {
+      console.warn(`[Directus Realtime] Subscription ${subscriptionId} already exists`);
+      return subscriptions.get(subscriptionId);
+    }
+    console.log(`[Directus Realtime] Subscribing to ${collection} with ID: ${subscriptionId}`);
+    try {
+      const { subscription, unsubscribe: unsubscribe2 } = await client.subscribe(collection, {
+        query,
+        uid: subscriptionId
+      });
+      (async () => {
+        try {
+          for await (const message of subscription) {
+            console.log(`[Directus Realtime] Event received for ${collection}:`, message);
+            callback(message);
+          }
+        } catch (error) {
+          console.error(`[Directus Realtime] Subscription error for ${collection}:`, error);
+        }
+      })();
+      const handler = {
+        uid: subscriptionId,
+        collection,
+        unsubscribe: unsubscribe2,
+        persistent
+      };
+      subscriptions.set(subscriptionId, handler);
+      if (!persistent) {
+        localSubscriptions.value.add(subscriptionId);
+      }
+      return handler;
+    } catch (error) {
+      console.error(`[Directus Realtime] Error subscribing to ${collection}:`, error);
+      throw error;
+    }
+  };
+  const unsubscribe = (subscriptionId) => {
+    const handler = subscriptions.get(subscriptionId);
+    if (!handler) {
+      console.warn(`[Directus Realtime] Subscription ${subscriptionId} not found`);
+      return;
+    }
+    console.log(`[Directus Realtime] Unsubscribing from ${handler.collection} (${subscriptionId})`);
+    try {
+      handler.unsubscribe();
+      subscriptions.delete(subscriptionId);
+      localSubscriptions.value.delete(subscriptionId);
+    } catch (error) {
+      console.error(`[Directus Realtime] Error unsubscribing from ${subscriptionId}:`, error);
+    }
+  };
+  const unsubscribeCollection = (collection) => {
+    const toRemove = [];
+    subscriptions.forEach((handler, id) => {
+      if (handler.collection === collection && !handler.persistent) {
+        toRemove.push(id);
+      }
+    });
+    toRemove.forEach((id) => unsubscribe(id));
+  };
+  const unsubscribeAll = () => {
+    const toRemove = [];
+    subscriptions.forEach((handler, id) => {
+      if (!handler.persistent) {
+        toRemove.push(id);
+      }
+    });
+    toRemove.forEach((id) => unsubscribe(id));
+  };
+  const getActiveSubscriptions = () => {
+    return Array.from(subscriptions.values());
+  };
+  const hasSubscription = (subscriptionId) => {
+    return subscriptions.has(subscriptionId);
+  };
+  const sendMessage = (message) => {
+    try {
+      client.sendMessage(message);
+    } catch (error) {
+      console.error("[Directus Realtime] Error sending message:", error);
+      throw error;
+    }
+  };
+  const reconnect = () => {
+    try {
+      $directusWs.initialize();
+    } catch (error) {
+      console.error("[Directus Realtime] Error reconnecting:", error);
+      throw error;
+    }
+  };
+  onUnmounted(() => {
+    localSubscriptions.value.forEach((id) => {
+      unsubscribe(id);
+    });
+  });
+  return {
+    // Connection state
+    isConnected,
+    // Subscription management
+    subscribe,
+    unsubscribe,
+    unsubscribeCollection,
+    unsubscribeAll,
+    // Subscription info
+    getActiveSubscriptions,
+    hasSubscription,
+    // WebSocket controls
+    sendMessage,
+    reconnect,
+    // Direct client access
+    client
+  };
+};

package/dist/runtime/directus.js

@@ -0,0 +1,106 @@
+import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+import { createDirectus, rest, authentication, realtime, readMe } from "@directus/sdk";
+class NuxtCookieStorage {
+  cookie = useCookie("directus-data", {
+    default: () => null,
+    secure: process.env.NODE_ENV === "production",
+    sameSite: process.env.NODE_ENV === "production" ? "strict" : "lax",
+    httpOnly: false
+  });
+  get() {
+    return this.cookie.value;
+  }
+  set(data) {
+    this.cookie.value = data;
+  }
+}
+export default defineNuxtPlugin(async () => {
+  const config = useRuntimeConfig();
+  const apiUrl = config.public.directusUrl;
+  if (!apiUrl) {
+    throw new Error("[Directus] NUXT_PUBLIC_DIRECTUS_URL is not configured. Please set it in your nuxt.config.ts runtimeConfig.public.directusUrl");
+  }
+  if (import.meta.client) {
+    console.log("[Directus] Using API URL:", apiUrl);
+  }
+  const wsBaseUrl = config.public.directusWsUrl || config.public.directusUrl;
+  const wsUrl = wsBaseUrl.replace(/^http/, "ws") + "/websocket";
+  if (import.meta.client) {
+    console.log("[Directus] WebSocket URL:", wsUrl);
+  }
+  const storage = new NuxtCookieStorage();
+  const directusClient = createDirectus(apiUrl).with(authentication("cookie", { credentials: "include", storage })).with(rest({ credentials: "include" })).with(
+    realtime({
+      url: wsUrl,
+      debug: process.env.NODE_ENV === "development"
+    })
+  );
+  const isAuthenticatedState = useState("directus-authenticated", () => false);
+  const currentUser = useState("directus-user", () => null);
+  const isWebSocketConnected = useState("directus-ws-connected", () => false);
+  const initializeWebSocket = () => {
+    if (!import.meta.client) return;
+    try {
+      directusClient.connect();
+      directusClient.onWebSocket("open", () => {
+        console.log("[Directus] WebSocket connection established");
+        isWebSocketConnected.value = true;
+      });
+      directusClient.onWebSocket("close", () => {
+        console.log("[Directus] WebSocket connection closed");
+        isWebSocketConnected.value = false;
+      });
+      directusClient.onWebSocket("error", (error) => {
+        console.error("[Directus] WebSocket error:", error);
+        isWebSocketConnected.value = false;
+      });
+      directusClient.onWebSocket("message", (message) => {
+        console.log("[Directus] WebSocket message:", message);
+      });
+    } catch (error) {
+      console.error("[Directus] WebSocket connection failed:", error);
+    }
+  };
+  const checkAuthStatus = async () => {
+    try {
+      const me = await directusClient.request(readMe());
+      isAuthenticatedState.value = true;
+      currentUser.value = me;
+      if (!isWebSocketConnected.value) {
+        initializeWebSocket();
+      }
+      return me;
+    } catch (error) {
+      isAuthenticatedState.value = false;
+      currentUser.value = null;
+      return false;
+    }
+  };
+  const getRefreshToken = () => {
+    const refreshToken = useCookie("directus_refresh_token", {
+      default: () => null,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: process.env.NODE_ENV === "production" ? "strict" : "lax",
+      httpOnly: false
+    });
+    return refreshToken.value;
+  };
+  if (import.meta.client) {
+    await checkAuthStatus();
+  }
+  return {
+    provide: {
+      directus: directusClient,
+      directusAuth: {
+        isAuthenticated: readonly(isAuthenticatedState),
+        currentUser: readonly(currentUser),
+        checkAuthStatus,
+        getRefreshToken
+      },
+      directusWs: {
+        isConnected: readonly(isWebSocketConnected),
+        initialize: initializeWebSocket
+      }
+    }
+  };
+});

package/dist/runtime/middleware/directus-auth.js

@@ -0,0 +1,127 @@
+import { defineNuxtRouteMiddleware, navigateTo, useRuntimeConfig, useCookie } from "#app";
+import { useDirectusAuth } from "../composables/useDirectusAuth.js";
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  const { isAuthenticated, fetchUser } = useDirectusAuth();
+  const config = useRuntimeConfig();
+  const { loginPath, registerPath, afterLoginPath } = config.public.directus?.auth || {
+    loginPath: "/login",
+    registerPath: "/register",
+    afterLoginPath: "/"
+  };
+  const enableGlobalMiddleware = config.public.directus?.enableGlobalMiddleware ?? true;
+  console.log("[directus-auth middleware] from", from.fullPath, "to", to.fullPath);
+  const authMetaRaw = to.meta?.auth;
+  let authMeta;
+  let requiresAuth;
+  if (authMetaRaw === false) {
+    requiresAuth = false;
+  } else if (authMetaRaw === true) {
+    requiresAuth = true;
+    authMeta = {};
+  } else if (typeof authMetaRaw === "object" && authMetaRaw !== null) {
+    requiresAuth = true;
+    authMeta = authMetaRaw;
+  } else {
+    requiresAuth = enableGlobalMiddleware;
+  }
+  if ([loginPath, registerPath].some((p) => to.path.startsWith(p))) {
+    return;
+  }
+  if (!requiresAuth) {
+    return;
+  }
+  try {
+    if (!isAuthenticated.value) {
+      try {
+        await fetchUser();
+      } catch {
+      }
+    }
+    const authenticated = isAuthenticated.value;
+    if (!authenticated) {
+      if (authMeta?.unauthenticatedOnly) {
+        return;
+      }
+      const redirectCookie = useCookie("directus-auth-redirect", {
+        default: () => "",
+        maxAge: 60 * 10
+        // 10 minutes
+      });
+      if (!to.path.startsWith(loginPath) && !to.path.startsWith(registerPath)) {
+        redirectCookie.value = to.fullPath;
+      }
+      const redirectTo = authMeta?.navigateUnauthenticatedTo || loginPath;
+      return navigateTo(redirectTo);
+    }
+    if (authenticated) {
+      if (authMeta?.unauthenticatedOnly) {
+        const redirectCookie = useCookie("directus-auth-redirect", {
+          default: () => ""
+        });
+        let redirectTo = afterLoginPath;
+        if (authMeta?.navigateAuthenticatedTo) {
+          redirectTo = authMeta.navigateAuthenticatedTo;
+        }
+        if (redirectCookie.value && (from.path.startsWith(loginPath) || from.path.startsWith(registerPath))) {
+          redirectTo = redirectCookie.value;
+          redirectCookie.value = "";
+        }
+        return navigateTo(redirectTo);
+      }
+      const permissionsConfig = config.public.directus?.auth?.permissions;
+      if (permissionsConfig?.enabled && (authMeta?.roles || authMeta?.excludeRoles)) {
+        const currentUser = isAuthenticated.value ? await fetchUser() : null;
+        if (currentUser) {
+          const roleField = permissionsConfig.field || "role";
+          let userRoleValue = currentUser[roleField];
+          if (permissionsConfig.transform && typeof permissionsConfig.transform === "function") {
+            try {
+              userRoleValue = permissionsConfig.transform(userRoleValue, currentUser);
+            } catch (e) {
+              console.error("[directus-auth middleware] Error in transform function:", e);
+            }
+          }
+          let userRoles;
+          if (Array.isArray(userRoleValue)) {
+            userRoles = userRoleValue;
+          } else if (userRoleValue != null) {
+            userRoles = [userRoleValue];
+          } else {
+            userRoles = [];
+          }
+          if (permissionsConfig.mapping) {
+            userRoles = userRoles.map((role) => permissionsConfig.mapping[role] || role);
+          }
+          if (authMeta.roles && authMeta.roles.length > 0) {
+            const hasPermission = authMeta.roles.some((requiredRole) => userRoles.includes(requiredRole));
+            if (!hasPermission) {
+              console.warn(`[directus-auth middleware] User roles [${userRoles.join(", ")}] don't match required roles:`, authMeta.roles);
+              const unauthorizedRedirect = authMeta.unauthorizedRedirect || "/";
+              return navigateTo(unauthorizedRedirect);
+            }
+          }
+          if (authMeta.excludeRoles && authMeta.excludeRoles.length > 0) {
+            const isExcluded = userRoles.some((role) => authMeta.excludeRoles.includes(role));
+            if (isExcluded) {
+              console.warn(`[directus-auth middleware] User has excluded role in [${userRoles.join(", ")}]:`, authMeta.excludeRoles);
+              const unauthorizedRedirect = authMeta.unauthorizedRedirect || "/";
+              return navigateTo(unauthorizedRedirect);
+            }
+          }
+        }
+      }
+    }
+  } catch (error) {
+    console.error("[directus-auth middleware] Error checking authentication:", error);
+    const redirectCookie = useCookie("directus-auth-redirect", {
+      default: () => "",
+      maxAge: 60 * 10
+      // 10 minutes
+    });
+    if (!to.path.startsWith(loginPath) && !to.path.startsWith(registerPath)) {
+      redirectCookie.value = to.fullPath;
+    }
+    return navigateTo(loginPath);
+  }
+  return;
+});

package/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.js'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module'

package/package.json

@@ -0,0 +1,55 @@
+{
+    "name": "@michael-nussbaumer/nuxt-directus",
+    "version": "0.1.0",
+    "description": "Nuxt 4 module for Directus SDK with auth and TypeScript type generation",
+    "license": "MIT",
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./dist/module.d.ts",
+            "import": "./dist/module.mjs",
+            "require": "./dist/module.cjs"
+        }
+    },
+    "main": "./dist/module.cjs",
+    "types": "./dist/module.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "dev": "pnpm run generate:types && nuxi dev playground",
+        "build": "nuxt-module-build build",
+        "prepack": "pnpm run build",
+        "generate:types": "cross-env NODE_ENV=development tsx scripts/generate-directus-types.ts",
+        "lint": "eslint .",
+        "release": "pnpm run build && npm publish"
+    },
+    "dependencies": {
+        "@nuxt/kit": "^3.15.3",
+        "defu": "^6.1.4"
+    },
+    "devDependencies": {
+        "@directus/sdk": "^21.0.0",
+        "@nuxt/module-builder": "^0.8.4",
+        "@nuxt/schema": "^3.15.3",
+        "@types/node": "^22.10.5",
+        "cross-env": "^7.0.3",
+        "execa": "^9.5.2",
+        "nuxt": "^3.15.3",
+        "openapi-typescript": "^7.4.4",
+        "tsx": "^4.19.2",
+        "typescript": "^5.7.3",
+        "unbuild": "^2.0.0"
+    },
+    "peerDependencies": {
+        "@directus/sdk": ">=17.0.0"
+    },
+    "packageManager": "pnpm@9.15.4",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Michael-Nussbaumer/nuxt-directus-module.git"
+    }
+}