nuxt-directus-sdk

A Nuxt 4 Directus module that uses the Directus SDK to enhance your Nuxt application

• ✨  Release Notes
• 📚  Documentation

Features

• 🔒  Session-based authentication with cross-domain support
• ⛰  Authentication out of the box
• 🚠  Type generation based on Directus collections
• 🔥  Typesafe Client Websockets enabled
• 🌉  Automatically configures Nuxt Image for directus
• 🗂️  Directus Admin panel added to Devtools

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: {
    // Optional: customize authentication (defaults shown)
    auth: {
      autoRefresh: true,
      credentials: 'include', // Required for cross-domain
      realtimeAuthMode: 'public',
    }
  }
})

3. Create a .env file:

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

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

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

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

Development

# Install dependencies
bun install

# Generate type stubs
bun run dev:prepare

# Develop with the playground
bun run dev

# Build the playground
bun run dev:build

# Run ESLint
bun run lint

# Run Vitest
bun run test
bun run test:watch

# Release new version
bun run release