---
title: "Nuxt Devtools"
description: "Learn how to use the Strapi Admin directly in the Nuxt Devtools."
canonical_url: "https://strapi.nuxtjs.org/devtools"
---
# Nuxt Devtools

> Learn how to use the Strapi Admin directly in the Nuxt Devtools.

![Strapi in Nuxt Devtools](https://user-images.githubusercontent.com/904724/222923164-f4f13177-7582-4581-a88e-0256c0789c9d.png)

## Setup <u-badge className="align-middle,rounded-full" label="v1.9.0+" variant="subtle"></u-badge>

Strapi uses [helmet](https://helmetjs.github.io/) as [security middleware](https://github.com/strapi/strapi/blob/main/packages/core/strapi/lib/middlewares/security.js).

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:

```diff [config/middlewares.js]
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`:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  strapi: {
    devtools: true
  }
})
```

<tip>

You should now see your Strapi Admin right into your Nuxt project by opening the devtools ✨

</tip>


## Sitemap

See the full [sitemap](https://strapi.nuxtjs.org/sitemap.md) for all pages.