Installation

Setup

1. Install nuxt-directus-next dependency to your project:

pnpm i -D nuxt-directus-next

2. Add it to your modules section in your nuxt.config:

export default defineNuxtConfig({
  modules: ['nuxt-directus-next']
})

Project Url

The module is now installed, but you need to configure it to work with your Directus instance.

export default defineNuxtConfig({
  modules: ['nuxt-directus-next'],
  directus: {
    url: 'https://directus.example.com',
  }
})

DevTools

Before you can activate the Devtools, you have to update the Directus Security Options.

By default, it sets the Content Security Policy directive to frame-ancestors 'self'. Making it impossible to embed the admin on localhost.

To enable the embedding of the Directus Admin Dashboard, set the following environment/config variable:

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

Restart your Directus server and it should be ready to be embedded in the devtools.

Open your nuxt.config.ts and set the devtools option to true:

export default defineNuxtConfig({
  modules: ['nuxt-directus-next'],

  directus: {
    moduleConfig: {
      devtools: true
    }
  }
})