Add the Directus Admin Dashboard directly in the Nuxt Devtools.

Directus in Nuxt Devtools


Available in v5.1.4+

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:


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  }})
You should now see your Directus Admin Dashboard right into your Nuxt project by opening the devtools ✨