@michael-nussbaumer/nuxt-directus

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

pnpm add @michael-nussbaumer/nuxt-directus

Quick Start

1. Add Module to nuxt.config.ts

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:

DIRECTUS_URL=http://localhost:8055
DIRECTUS_OPENAPI_TOKEN=Bearer your-token-here

3. Use Auth Composable

<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

definePageMeta({
    auth: false,
});

Protected Page (Default)

definePageMeta({
    auth: true,
});

Unauthenticated Only (Login Page)

definePageMeta({
    auth: {
        unauthenticatedOnly: true,
        navigateAuthenticatedTo: "/dashboard",
    },
});

Custom Redirects

definePageMeta({
    auth: {
        navigateUnauthenticatedTo: "/custom-login",
    },
});

Documentation

📚 Full Documentation Site

Comprehensive guides for all module features:

• Getting Started - Installation, setup, and basic usage
• Configuration - Module options and environment variables
• Authentication - Login, logout, registration, and user management
• API Usage - CRUD operations, queries, and filtering
• Real-time WebSocket - Live subscriptions and event handling
• Middleware - Route protection and authentication flows
• Permissions - Advanced access control
• Type Generation - Automatic TypeScript types from OpenAPI schema
• Examples - Code examples and use cases

Or browse the docs folder in this repository.

Quick Reference

Module Options

{
  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(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

pnpm install

Development Server

pnpm run dev

Build

pnpm run build

Playground

The module includes a playground for testing:

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-Nussbaumer/nuxt-directus-module

Documentation Site

Visit: https://michael-nussbaumer.github.io/nuxt-directus-module/