directus-sdk
nuxt-directus-sdk

A Nuxt module for Directus with built-in authentication, realtime, file management, type generation, and visual editor support.
1.4K downloads11 starsv5.0.3
matt-rolleymatt-rolley
kheinerkheiner

nuxt-directus-sdk

npm versionnpm downloadsLicenseNuxt

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

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
  1. 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',
    }
  }
})
  1. Create a .env file:
DIRECTUS_URL=https://your-directus-url.com
DIRECTUS_ADMIN_TOKEN=your_admin_token # Optional: for type generation
  1. 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