Merge pull request #333 from markus-gx/feat/nuxt-devtools

Nuxt Devtools integration

README.md

@@ -77,13 +77,15 @@ export default defineNuxtConfig({
 #### Options
 
 When you initialize the module, you can pass all [_@storyblok/vue_ options](https://github.com/storyblok/storyblok-vue#storyblok-api) plus a `bridge` option explained in our [JS SDK Storyblok bridge section](https://github.com/storyblok/storyblok-js#storyblok-bridge).
+If you want to use Storyblok inside `nuxt-devtools` you can use the option `devtools`, if enabled, make sure to have installed the @nuxt/devtools module and enable it on your nuxt config.
 
 ```js
 // Defaults
 ["@storyblok/nuxt", {
   {
     accessToken: "<your-access-token>",
     bridge: true,
+    devtools: true,
     apiOptions: {}, // storyblok-js-client options
   }
 }]

lib/src/module.ts

@@ -11,6 +11,7 @@ export interface ModuleOptions {
   accessToken: string,
   usePlugin: boolean,
   bridge: boolean, // storyblok bridge on/off
+  devtools: boolean, // enable nuxt/devtools integration
   apiOptions: any, // storyblok-js-client options
 }
 
@@ -23,6 +24,7 @@ export default defineNuxtModule<ModuleOptions>({
     accessToken: '',
     usePlugin: true,
     bridge: true,
+    devtools: false,
     apiOptions: {},
   },
   setup(options, nuxt) {
@@ -59,5 +61,20 @@ export default defineNuxtModule<ModuleOptions>({
       addImports({ name, as: name, from: "@storyblok/vue" });
     }
     addImportsDir(resolver.resolve("./runtime/composables"));
+
+    if (options.devtools) {
+      // @ts-expect-error - private API
+      nuxt.hook('devtools:customTabs', (iframeTabs) => {
+        iframeTabs.push({
+          name: 'storyblok',
+          title: 'Storyblok',
+          icon: 'i-logos-storyblok-icon',
+          view: {
+            type: 'iframe',
+            src: 'https://app.storyblok.com/#!/me/spaces/'
+          }
+        })
+      })
+    }
   }
 });