feat: migrate vue-devtools to v7.3

packages/devtools/client/pages/modules/components-tree.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Components as VueComponents } from '@vue/devtools-applet'
+import { useDevToolsState as useVueDevToolsState } from '@vue/devtools-core'
 
 const { connected } = useVueDevToolsState()
 const client = useClient()

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Pinia } from '@vue/devtools-applet'
+import { useDevToolsState as useVueDevToolsState } from '@vue/devtools-core'
 
 const { connected } = useVueDevToolsState()
 

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

@@ -0,0 +1,5 @@
+import { VueDevToolsVuePlugin } from '@vue/devtools-core'
+
+export default defineNuxtPlugin((nuxtApp) => {
+ nuxtApp.vueApp.use(VueDevToolsVuePlugin())
+})

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

@@ -1,40 +1,5 @@
-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 appConnected = ref(false)
-const clientConnected = ref(false)
-const appRecords = ref<Array<DevtoolsBridgeAppRecord>>([])
-const activeAppRecordId = ref<string | null>(null)
-export const connected = computed(() => appConnected.value && clientConnected.value)
-export const activeAppRecord = computed(() => appRecords.value.find(r => r.id === activeAppRecordId.value))
-
-export function initVueDevToolsState() {
- getDevToolsState().then((data) => {
- if (!data)
- return
- appConnected.value = data.connected
- clientConnected.value = data.clientConnected
- appRecords.value = data.appRecords
- activeAppRecordId.value = data.activeAppRecordId
- })
-
- onDevToolsStateUpdated((data) => {
- if (!data)
- return
- appConnected.value = data.connected
- clientConnected.value = data.clientConnected
- appRecords.value = data.appRecords
- activeAppRecordId.value = data.activeAppRecordId
- })
-
- return {
- appRecords,
- activeAppRecord,
- }
-}
+import { functions, onRpcConnected, rpc } from '@vue/devtools-core'
+import { createRpcClient, toggleHighPerfMode } from '@vue/devtools-kit'
 
 export function setupVueDevTools() {
  const state = useDevToolsFrameState()
@@ -48,18 +13,10 @@ export function setupVueDevTools() {
  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()
- })
- },
+ createRpcClient(functions, {
+ preset: 'iframe',
+ })
+ onRpcConnected(() => {
+ rpc.value.initDevToolsServerListener()
  })
 }

packages/devtools/package.json

@@ -46,6 +46,8 @@
  "@nuxt/devtools-kit": "workspace:*",
  "@nuxt/devtools-wizard": "workspace:*",
  "@nuxt/kit": "^3.12.2",
+ "@vue/devtools-core": "7.3.3",
+ "@vue/devtools-kit": "7.3.3",
  "birpc": "^0.2.17",
  "consola": "^3.2.3",
  "cronstrue": "^2.50.0",
@@ -96,9 +98,7 @@
  "@unocss/preset-uno": "^0.61.0",
  "@unocss/runtime": "^0.61.0",
  "@vitest/ui": "^1.6.0",
- "@vue/devtools-applet": "7.1.3",
- "@vue/devtools-core": "7.1.3",
- "@vue/devtools-kit": "7.1.3",
+ "@vue/devtools-applet": "7.3.3",
  "@vueuse/nuxt": "^10.11.0",
  "esno": "^4.7.0",
  "floating-vue": "5.0.2",

packages/devtools/src/runtime/plugins/view/client.ts

@@ -4,6 +4,7 @@ import { createHooks } from 'hookable'
 import { debounce } from 'perfect-debounce'
 import type { Router } from 'vue-router'
 import type { $Fetch } from 'ofetch'
+import { setIframeServerContext } from '@vue/devtools-kit'
 import type { NuxtDevtoolsHostClient, TimelineEventRoute, TimelineMetrics } from '../../../types'
 import { initTimelineMetrics } from '../../function-metrics-helpers'
 import Main from './Main.vue'
@@ -133,6 +134,7 @@ export async function setupDevToolsClient({
  iframe.src = initialUrl
  iframe.onload = async () => {
  try {
+ setIframeServerContext(iframe!)
  await waitForClientInjection()
  client.syncClient()
  }

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

@@ -1,6 +1,8 @@
-import { devtools } from '@vue/devtools-kit'
-import { initAppSeparateWindow } from '@vue/devtools-core'
+import { createRpcServer, devtools } from '@vue/devtools-kit'
+import { functions } from '@vue/devtools-core'
 
 devtools.init()
 
-initAppSeparateWindow()
+createRpcServer(functions, {
+ preset: 'iframe',
+})