Devtools

Add the Directus Admin Dashboard directly in the Nuxt Devtools.

Setup

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({  directus: {    devtools: true  }})