Nuxt Devtools

Add the Strapi Admin directly in the Nuxt Devtools.

Setup

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
  }
})