feat: add option to add Strapi admin in Nuxt Devtools

.nuxtrc

@@ -0,0 +1 @@
+typescript.includeWorkspace=true

docs/content/2.setup.md

@@ -111,6 +111,14 @@ Configure the `fields` query param of the `/users/me` route.
 
 > Learn more on [Field Selection documentation](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.html#field-selection).
 
+### `devtools`
+
+::badge
+v1.9.0+
+::
+
+Embed the Strapi admin to the [Nuxt Devtools](https://devtools.nuxtjs.org), read more in the [Devtools section](/devtools).
+
 ## Edge channel
 
 To use the latest updates pushed on the [`dev`](https://github.com/nuxt-modules/strapi/tree/dev) branch, you can use `@nuxtjs/strapi-edge`.

docs/content/6.devtools.md

@@ -0,0 +1,60 @@
+# Nuxt Devtools
+
+Add the Strapi Admin directly in the [Nuxt Devtools](https://devtools.nuxtjs.org).
+
+[![Strapi in Nuxt Devtools](https://user-images.githubusercontent.com/904724/222923164-f4f13177-7582-4581-a88e-0256c0789c9d.png)](https://user-images.githubusercontent.com/904724/222923164-f4f13177-7582-4581-a88e-0256c0789c9d.png)
+
+## Setup
+
+::badge
+Available in v1.9.0+
+::
+
+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`:
+
+::code-group
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  strapi: {
+    devtools: true
+  }
+})
+```
+::
+
+::alert{type="success"}
+You should now see your Strapi Admin right into your Nuxt project by opening the devtools :sparkles:
+::

example/nuxt.config.ts

@@ -1,8 +1,8 @@
-import module from '../src/module'
 
 export default defineNuxtConfig({
   modules: [
-    module
+    '../src/module',
+    '@nuxt/devtools'
   ],
   // example of separate client/server URLs
   /* runtimeConfig: {
@@ -13,5 +13,10 @@ export default defineNuxtConfig({
   }, */
   strapi: {
     url: 'http://localhost:1337'
+    // To enable the devtools, read https://strapi.nuxtjs.org/devtools
+    // devtools: true
+  },
+  typescript: {
+    includeWorkspace: true
   }
 })

package.json

@@ -31,6 +31,7 @@
     "ufo": "^1.1.1"
   },
   "devDependencies": {
+    "@nuxt/devtools": "^0.2.5",
     "@nuxt/module-builder": "^0.2.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/node": "^18.14.6",

src/module.ts

@@ -54,6 +54,15 @@ export interface ModuleOptions {
    * @example { populate: ['profile', 'teams'] }
   */
   auth?: AuthOptions
+
+  /**
+   * Add Strapi Admin in Nuxt Devtools
+   *
+   * Please read the instructions on https://strapi.nuxtjs.org/devtools
+   *
+   * @default false
+  */
+  devtools?: boolean
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -70,7 +79,8 @@ export default defineNuxtModule<ModuleOptions>({
     version: 'v4',
     cookie: {},
     auth: {},
-    cookieName: 'strapi_jwt'
+    cookieName: 'strapi_jwt',
+    devtools: false
   },
   setup (options, nuxt) {
     // Default runtimeConfig
@@ -96,9 +106,21 @@ export default defineNuxtModule<ModuleOptions>({
       config.optimizeDeps.include.push('qs')
     })
 
-    if (nuxt.options.dev) {
-      const adminUrl = joinURL(options.url as string, '/admin/')
-      logger.info(`Strapi Admin URL: ${adminUrl}`)
+    const adminUrl = joinURL(nuxt.options.runtimeConfig.public.strapi.url, '/admin/')
+    logger.info(`Strapi Admin URL: ${adminUrl}`)
+    if (options.devtools) {
+      // @ts-expect-error - private API
+      nuxt.hook('devtools:customTabs', (iframeTabs) => {
+        iframeTabs.push({
+          name: 'strapi',
+          title: 'Strapi',
+          icon: 'i-logos-strapi-icon',
+          view: {
+            type: 'iframe',
+            src: adminUrl
+          }
+        })
+      })
     }
   }
 })