Nuxt Directus

Nuxt Directus is a module designed to easily integrate Directus into Nuxt applications. It provides a seamless way to interact with the Directus RESTful API while leveraging Nuxt's ecosystem.

Key features include:

• Nuxt 3 Ready: Built specifically for the Nuxt 3 ecosystem.
• Authentication: Built-in support for handling Directus authentication.
• RESTful Methods: Direct access to the Directus RESTful API.
• TypeScript Support: Fully-typed API and composables for enhanced developer experience.
• Nuxt DevTools Integration: Integration with Nuxt DevTools for easier debugging.
• Static Support: Optimized for static site generation (SSG) using useAsyncData.
• Handy Composables: A suite of composables to simplify Directus integration.

The nuxt-directus module provides seamless integration between Directus and Nuxt 3. Key features include:

• Nuxt 3 ready: Built specifically for the Nuxt 3 ecosystem.
• Authentication handling: Built-in support for managing Directus authentication.
• RESTful methods: Provides access to Directus RESTful capabilities.
• TypeScript Support: Full type safety for your Directus interactions.

The useDirectusItems composable provides a suite of methods to perform CRUD (Create, Read, Update, Delete) operations on Directus collections. It allows you to interact with items using type-safe requests and returns data shaped by your Directus collection schema.

const { 
  getItems, 
  getSingletonItem, 
  getItemById, 
  createItems, 
  deleteItems, 
  updateItem 
} = useDirectusItems();

After installation, add nuxt-directus to the modules array in your nuxt.config.ts. You must also provide the Directus server URL within the runtimeConfig.public.directus object to allow the client to connect to your backend.

export default defineNuxtConfig({
  modules: ['nuxt-directus'],
  runtimeConfig: {
    public: {
      directus: {
        url: ""
      }
    }
  }
})

To allow the Directus Admin Dashboard to be embedded in Nuxt Devtools, you must modify the frame-ancestors directive in your Directus security settings. This allows the Directus interface to be rendered inside an iframe on your local development server.

Set the following environment variable in your Directus .env file: CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_ANCESTORS=array:http://localhost:*,self

+ CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_ANCESTORS=array:http://localhost:*,self

You can embed the Directus Admin Dashboard directly within the Nuxt Devtools. This requires two steps: updating your Directus security configuration to allow embedding and enabling the feature in your Nuxt configuration.

1. Update Directus Security Options

By default, Directus sets the Content Security Policy directive frame-ancestors to 'self', which prevents it from being embedded in localhost. To allow embedding, update your Directus environment variables or configuration to include http://localhost:* in the frame-ancestors directive.

2. Enable in Nuxt Configuration

Set the directus.devtools option to true in your nuxt.config.ts file.

// nuxt.config.ts
export default defineNuxtConfig({
  directus: {
    devtools: true
  }
})

After installation, ensure nuxt-directus is included in the modules array of your nuxt.config.ts file.

// nuxt.config.ts

export default defineNuxtConfig({
  modules: ["nuxt-directus"],
});

To install the nuxt-directus module in your Nuxt project, use the Nuxt module add command:

npx nuxi@latest module add directus

To protect specific routes in your Nuxt application, you can create a custom route middleware that uses useDirectusAuth() and useDirectusUser() to check for an active session. If no user is found, the middleware attempts to fetchUser() and set the user session via setUser(). If the user remains unauthenticated after the fetch attempt, the middleware redirects the user to a login page (e.g., /login) using navigateTo().

// ./middleware/auth.ts
export default defineNuxtRouteMiddleware(async (to, _from) => {
  const { fetchUser, setUser } = useDirectusAuth();
  const user = useDirectusUser();

  if (!user.value) {
    const user = await fetchUser();
    setUser(user.value);
  }

  if (!user.value) {
    return navigateTo("/login");
  }
});

Data returned from Directus is typically wrapped in specific interfaces depending on whether you are requesting a single item or a collection:

• Single Item: DirectusItem<T> contains a data property of type T.
• Collection: DirectusItems<T> contains a data array of type T[] and an optional meta object for pagination/count information.
• Metadata: DirectusItemMetadata provides total_count and filter_count.

export interface DirectusItemMetadata {
  total_count?: number;
  filter_count?: number;
};

export interface DirectusItems<T> {
  data: NonNullable<T[]>;
  meta?: DirectusItemMetadata;
};

export interface DirectusItem<T> {
  data: NonNullable<T>;
};

Control how the module handles user data and authentication lifecycle:

• autoFetch (default: true): Determines if the user should be fetched automatically.
• autoRefresh (default: false): Enables automatic refreshing of tokens.
• onAutoRefreshFailure() (default: not defined): A callback function that is executed if the autoRefresh process fails.
• fetchUserParams (optional): Parameters sent when the user is fetched (conforming to DirectusQueryParams).