feat: pinia panel

packages/devtools/client/app.vue

@@ -5,6 +5,7 @@ import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import './styles/global.css'
 import { useEyeDropper } from '@vueuse/core'
 import { setupClientRPC } from './setup/client-rpc'
+import { setupVueDevTools } from './setup/vue-devtools'
 import { splitScreenAvailable } from '~/composables/storage'
 
 if (process.client)
@@ -27,6 +28,7 @@ useHead({
   ],
 })
 
+setupVueDevTools()
 setupClientRPC()
 
 const client = useClient()

packages/devtools/client/composables/state-tabs.ts

@@ -6,10 +6,12 @@ export function useAllTabs() {
   const customTabs = useCustomTabs()
   const settings = useDevToolsUIOptions()
   const router = useRouter()
-
+  const vueDevToolsState = useVueDevToolsState()
+  const piniaDetected = computed(() => vueDevToolsState.activeAppRecord.value?.moduleDetectives?.pinia)
   const builtin = computed(() => [
     ...router.getRoutes()
       .filter(route => route.path.startsWith('/modules/') && route.meta.title && !route.meta.wip)
+      .filter(route => route.path.startsWith('/modules/pinia') ? (piniaDetected.value ? route : false) : route)
       .filter(route => !route.meta.experimental || (route.meta.experimental && settings.showExperimentalFeatures.value))
       .sort((a, b) => (a.meta.order || 100) - (b.meta.order || 100))
       .map((i): ModuleBuiltinTab => {

packages/devtools/client/composables/vue-devtools.ts

@@ -0,0 +1,7 @@
+import { activeAppRecord } from '../setup/vue-devtools'
+
+export function useVueDevToolsState() {
+  return {
+    activeAppRecord,
+  }
+}

packages/devtools/client/pages/modules/pinia.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { Pinia } from '@vue/devtools-applet'
+import '@vue/devtools-applet/style.css'
+
+definePageMeta({
+  icon: 'i-logos-pinia',
+  title: 'Pinia',
+  layout: 'full',
+})
+</script>
+
+<template>
+  <div class="h-full w-full">
+    <Pinia />
+  </div>
+</template>

packages/devtools/client/setup/vue-devtools.ts

@@ -0,0 +1,56 @@
+import { HandShakeServer, getDevToolsState, initDevToolsSeparateWindow, initDevToolsSeparateWindowBridge, onDevToolsStateUpdated, setupDevToolsBridge } from '@vue/devtools-core'
+import type { AppRecord } from '@vue/devtools-kit'
+import { toggleHighPerfMode } from '@vue/devtools-kit'
+
+export type DevtoolsBridgeAppRecord = Pick<AppRecord, 'name' | 'id' | 'version' | 'routerId' | 'moduleDetectives'>
+
+const appRecords = ref<Array<DevtoolsBridgeAppRecord>>([])
+const activeAppRecordId = ref<string | null>(null)
+export const activeAppRecord = computed(() => appRecords.value.find(r => r.id === activeAppRecordId.value))
+
+export function initVueDevToolsState() {
+  getDevToolsState().then((_data) => {
+    const data = _data!
+    appRecords.value = data.appRecords
+    activeAppRecordId.value = data.activeAppRecordId
+  })
+
+  onDevToolsStateUpdated((data) => {
+    appRecords.value = data.appRecords
+    activeAppRecordId.value = data.activeAppRecordId
+  })
+
+  return {
+    appRecords,
+    activeAppRecord,
+  }
+}
+
+export function setupVueDevTools() {
+  const state = useDevToolsFrameState()
+
+  const isInPopup = window.__NUXT_DEVTOOLS_IS_POPUP__
+
+  watchEffect(() => {
+    if (isInPopup)
+      toggleHighPerfMode(false)
+
+    else
+      toggleHighPerfMode(!state.value?.open)
+  })
+
+  initDevToolsSeparateWindow({
+    onConnected(channel) {
+      const bridge = initDevToolsSeparateWindowBridge(channel)
+      setupDevToolsBridge(bridge)
+      new HandShakeServer(bridge).onnConnect().then(() => {
+        bridge.emit('devtools:client-ready')
+        initVueDevToolsState()
+      })
+      bridge.on('disconnect', () => {
+        channel.close()
+        initDevToolsSeparateWindow()
+      })
+    },
+  })
+}

packages/devtools/package.json

@@ -47,6 +47,9 @@
     "@nuxt/devtools-kit": "workspace:*",
     "@nuxt/devtools-wizard": "workspace:*",
     "@nuxt/kit": "^3.10.3",
+    "@vue/devtools-applet": "^7.0.18",
+    "@vue/devtools-core": "^7.0.18",
+    "@vue/devtools-kit": "^7.0.18",
     "birpc": "^0.2.17",
     "consola": "^3.2.3",
     "destr": "^2.0.3",

packages/devtools/src/integrations/vue-devtools.ts

@@ -0,0 +1,28 @@
+import { addVitePlugin } from '@nuxt/kit'
+import { join } from 'pathe'
+import type { NuxtDevtoolsServerContext } from '../types'
+import { runtimeDir } from '../dirs'
+
+export function setup({ nuxt }: NuxtDevtoolsServerContext) {
+  if (!nuxt.options.dev || nuxt.options.test)
+    return
+
+  addVitePlugin({
+    name: 'vue:devtools',
+    async resolveId(importee: string) {
+      if (importee.startsWith('virtual:vue-devtools-path:')) {
+        const resolved = importee.replace('virtual:vue-devtools-path:', join(runtimeDir, 'vue-devtools/'))
+        return resolved
+      }
+    },
+    transform(code, id) {
+      const [filename] = id.split('?', 2)
+      const appendTo = /\/entry\.m?js$/
+
+      if (appendTo.test(filename))
+        code = `import 'virtual:vue-devtools-path:overlay.js';\n${code}`
+
+      return code
+    },
+  })
+}

packages/devtools/src/module-main.ts

@@ -185,6 +185,8 @@ window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now()
 
   await import('./integrations/plugin-metrics').then(({ setup }) => setup(ctx))
 
+  await import('./integrations/vue-devtools').then(({ setup }) => setup(ctx))
+
   if (options.viteInspect !== false)
     await import('./integrations/vite-inspect').then(({ setup }) => setup(ctx))
 

packages/devtools/src/runtime/vue-devtools/overlay.js

@@ -0,0 +1,6 @@
+import { devtools } from '@vue/devtools-kit'
+import { initAppSeparateWindow } from '@vue/devtools-core'
+
+devtools.init()
+
+initAppSeparateWindow()