Nuxt Devtools

Add the Strapi Admin directly in the Nuxt Devtools.

Strapi in Nuxt Devtools


Available in 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::security',
+ {
+ name: 'strapi::security',
+ config: {
+ contentSecurityPolicy: {
+ directives: {
+ frameAncestors: ['http://localhost:*', 'self']
+ }
+ }
+ },
+ },

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