feat: added codemirror devtool tab and updated module.ts

client/.nuxtrc

@@ -0,0 +1 @@
+imports.autoImport=true

client/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

client/components/DevtoolsPane.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <div
+    class="relative
+    px-4
+    py-6
+    border
+    border-solid
+    border-gray-200
+    rounded
+    my-4"
+  >
+    <span
+      class="absolute
+      bg-white
+      text-xs
+      dark:bg-[#151515]
+      text-gray-400
+      px-2
+      rounded
+      -top-2
+      left-2"
+    >{{ title }}</span>
+    <slot />
+  </div>
+</template>

client/components/ModuleAuthorNote.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <NTip
+    n="teal"
+    class="py-4"
+  >
+    <p class="font-bold">
+      Note for module authors:
+    </p>
+    Nuxt DevTools is in early preview and the API is subject to change.
+    Which means the setup in this template is only presenting the current state of the API.
+    We suggest following closely to the changes in the <NLink
+      href="https://github.com/nuxt/devtools"
+      target="_blank"
+    >
+      nuxt/devtools
+    </NLink> repository.<br>
+    The UI components are coming from <NLink
+      href="https://github.com/nuxt/devtools/tree/main/packages/devtools-ui-kit"
+      target="_blank"
+    >
+      @nuxt/devtools-ui-kit
+    </NLink>.
+  </NTip>
+</template>

client/global.d.ts

@@ -0,0 +1,6 @@
+interface Window {
+  __CODEMIRROR__DEVTOOLS__?: {
+    cb: () => void
+    // You can add other properties of __CODEMIRROR__DEVTOOLS__ here if needed
+  }
+}

client/nuxt.config.ts

@@ -0,0 +1,31 @@
+import { resolve } from 'pathe'
+
+export default defineNuxtConfig({
+
+  modules: [
+    '@nuxt/devtools-ui-kit',
+    '@nuxt/icon',
+    '@nuxt/ui',
+  ],
+  ssr: false,
+
+  app: {
+    baseURL: '/__codemirror_nuxt_devtools',
+  },
+
+  compatibilityDate: '2025-03-16',
+
+  nitro: {
+    output: {
+      publicDir: resolve(__dirname, '../dist/client'),
+    },
+  },
+
+  icon: {
+    size: '24px', // default <Icon> size applied
+    class: 'icon', // default <Icon> class applied
+    aliases: {
+      mesh: 'carbon:code',
+    },
+  },
+})

client/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "codemirror-nuxt-devtools",
+  "type": "module",
+  "private": true
+}

client/pages/index.vue

@@ -0,0 +1,32 @@
+<!-- eslint-disable max-len -->
+<script setup lang="ts">
+import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
+
+const client = useDevtoolsClient()
+</script>
+
+<template>
+  <div class="relative n-bg-base flex flex-col h-screen">
+    <header class="p4 flex items-center justify-between hover:bg-active p-2" border="b base">
+      <div class="flex items-center gap-4">
+        <h2 class="opacity-60 font-bold">
+          CodeMirror DevTools
+        </h2>
+      </div>
+      <div class="flex items-center gap-2">
+        <UButton variant="ghost" color="white" size="sm" icon="i-carbon-document" target="_blank"
+          to="https://codemirror.net/docs/ref/" />
+        <UButton variant="ghost" color="white" size="sm" icon="i-iconoir-github" target="_blank"
+          to="https://github.com/ThimoDEV/nuxt-codemirror" />
+      </div>
+    </header>
+    <div v-if="client" class="flex flex-col gap-2 p-2">
+      Connected to the client.
+    </div>
+    <div v-else>
+      <span class="text-yellow-500">
+        Failed to connect to the client. Did you open this page inside Nuxt DevTools?
+      </span>
+    </div>
+  </div>
+</template>

client/utils/index.ts

@@ -0,0 +1 @@
+// add your types here

package.json

@@ -28,6 +28,8 @@
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "client:build": "nuxt prepare client && nuxi generate client",
+    "client:dev": "nuxi dev client --port 3300",
     "docs": "nuxt dev docs",
     "docs:build": "nuxt build docs",
     "docs:prepare": "nuxt prepare docs",
@@ -55,6 +57,7 @@
   },
   "devDependencies": {
     "@nuxt/devtools": "^2.2.1",
+    "@nuxt/devtools-ui-kit": "^1.6.4",
     "@nuxt/eslint-config": "^1.2.0",
     "@nuxt/module-builder": "^0.8.4",
     "@nuxt/schema": "^3.16.0",

playground/nuxt.config.ts

@@ -1,10 +1,12 @@
 export default defineNuxtConfig({
   modules: ['../src/module'],
-  devtools: { enabled: false },
+  devtools: { enabled: true },
   devServer: {
     port: 4000,
   },
   compatibilityDate: '2024-07-24',
-  nuxtCodemirror: {},
+  nuxtCodemirror: {
+    devtools: true,
+  },
 },
 )