Nuxt Devtools

Setup v1.9.0+

Strapi uses helmet as security middleware.

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 Strapi Admin, open the config/middlewares.js file in your Strapi project and update the strapi::security middleware:

module.exports = [
  'strapi::errors',
- 'strapi::security',
+ {
+   name: 'strapi::security',
+   config: {
+     contentSecurityPolicy: {
+       directives: {
+         frameAncestors: ['http://localhost:*', 'self']
+       }
+     }
+   }
+ },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public'
]

Restart your Strapi 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({
  strapi: {
    devtools: true
  }
})