nuxt-directus-sdk

A Nuxt module for Directus with built-in authentication, realtime, file management, type generation, and visual editor support.

• ✨  Release Notes
• 📚  Documentation
• 🛝  Live Playground

Features

• 🔒  Session-based authentication with cross-domain support
• ⚡  Realtime via typed WebSocket subscriptions
• 📁  File management with @nuxt/image integration
• ✏️  Visual editor support for @directus/visual-editing
• 🧩  Auto-generated types from your Directus schema, plus a standalone CLI
• 📐  Rules DSL for defining and syncing permissions in code
• 🗂️  Directus admin panel embedded in Nuxt Devtools

Requirements

• Nuxt 4.0+
• Directus v11.16.0+ (required by the bundled @directus/visual-editing v2 and @directus/sdk v21)

Quick Setup

1. Add nuxt-directus-sdk dependency to your project

# Using pnpm
pnpm add -D nuxt-directus-sdk

# Using yarn
yarn add --dev nuxt-directus-sdk

# Using npm
npm install --save-dev nuxt-directus-sdk

# Using bun
bun install --save-dev nuxt-directus-sdk

2. Add nuxt-directus-sdk to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-directus-sdk'],
  directus: {
    url: process.env.DIRECTUS_URL,
  },
})

3. Create a .env file:

DIRECTUS_URL=https://your-directus-url.com
DIRECTUS_ADMIN_TOKEN=your_admin_token # Optional: required for type generation

4. Configure your Directus backend for cross-domain authentication (see the Authentication Guide)

That's it! You can now use Directus within your Nuxt app ✨

For cross-domain setups (e.g. app.example.com and api.example.com), see the Authentication Guide.

CLI

The module ships with a CLI for type generation and permissions/rules sync that doesn't require a running Nuxt instance. Useful in CI, pre-commit hooks, or quick regeneration during development.

# Generate TypeScript types from a Directus schema
npx nuxt-directus-sdk generate-types --prefix App -o types/directus.d.ts

# Pull permissions/rules to a JSON file
npx nuxt-directus-sdk rules:pull -o rules.json

# See all commands
npx nuxt-directus-sdk --help

See the CLI documentation for flags and examples.

Development

[!IMPORTANT] The playground uses the directus-template-cli cms template. Apply the template with npx directus-template-cli@latest apply and follow the interactive prompts.

# Install dependencies
pnpm install

# Add DIRECTUS_ADMIN_TOKEN to playground .env (don't forget to update your token)
cp ./playground/.env.example ./playground/.env

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version (see RELEASING.md)
pnpm run release

Contributing

Contributions are welcome. Please target the next branch for new features and fixes; main is reserved for stable releases and hotfixes. See RELEASING.md for the release process.