fix: reactivity life cycle

Author: antfu

packages/devtools-kit/src/_types/custom-tabs.ts

@@ -1,4 +1,4 @@
-import type { VNode } from 'vue'
+import type { MaybeRefOrGetter, VNode } from 'vue'
 import type { TabCategory } from './common'
 
 export interface ModuleCustomTab {
@@ -112,7 +112,7 @@ export interface ModuleBuiltinTab {
   title?: string
   path?: string
   category?: TabCategory
-  show?: () => any
+  show?: () => MaybeRefOrGetter<any>
   badge?: () => number | string | undefined
   onClick?: () => void
 }

packages/devtools/client/components/docs/modules.md

@@ -2,4 +2,6 @@
 
 Nuxt provides a module system to extend the framework core and simplify integrations. You don't need to develop everything from scratch or maintain boilerplate if there is already a Nuxt module for it. Adding Nuxt modules is possible using `nuxt.config`.
 
+You can explore the list of modules on [nuxt.com/modules](https://nuxt.com/modules) or install them directly inside the DevTools.
+
 [Learn more on the documentation](https://nuxt.com/docs/guide/concepts/modules)

packages/devtools/client/composables/state.ts

@@ -1,6 +1,5 @@
 import type { Component } from 'nuxt/schema'
 import { $fetch } from 'ofetch'
-import { unref } from 'vue'
 import type { Ref } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
 import { objectPick } from '@antfu/utils'
@@ -31,6 +30,10 @@ export function useInstalledModules() {
 
     return computed(() => (config.value?._installedModules || [])
       .map((mod): InstalledModuleInfo => {
+        // hide inline modules
+        if (!mod.entryPath)
+          return undefined!
+
         const isPackageModule = mod.entryPath && isNodeModulePath(mod.entryPath)
         const name = mod.meta?.name
           ? mod.meta?.name
@@ -53,7 +56,7 @@ export function useInstalledModules() {
           ...mod,
         }
       })
-      .filter(i => !i.name || !ignoredModules.includes(i.name)),
+      .filter(i => i && (!i.name || !ignoredModules.includes(i.name))),
     )
   })
 }
@@ -114,9 +117,7 @@ export function useComponentsRelationships() {
 }
 
 export function useServerHooks() {
-  return useAsyncState('getServerHooks', () => rpc.getServerHooks(), {
-    default: () => [],
-  }) as Ref<HookInfo[]>
+  return useAsyncState('getServerHooks', () => rpc.getServerHooks()) as Ref<HookInfo[] | undefined>
 }
 
 export function useLayouts() {
@@ -175,7 +176,7 @@ export function useAllTabs() {
       icon: 'i-carbon-select-window',
       category: 'app',
       show() {
-        return !!client.value?.inspector?.instance
+        return () => !!client.value?.inspector?.instance
       },
       onClick() {
         if (!client.value?.inspector?.instance)
@@ -227,23 +228,16 @@ export function getCategorizedTabs(tabs: MaybeRef<(ModuleCustomTab | ModuleBuilt
   })
 }
 
-export function useCategorizedTabs(enabledOnly = true) {
-  const tabs = enabledOnly
-    ? useEnabledTabs()
-    : useAllTabs()
-
-  return getCategorizedTabs(tabs)
-}
-
 export function useEnabledTabs() {
   const tabs = useAllTabs()
   const settings = useDevToolsOptions()
   const categoryOrder = Object.keys(getCategorizedRecord())
+  const tabShows = tabs.value.map(tab => (tab as ModuleBuiltinTab)?.show?.())
 
   return computed(() => tabs.value
-    .filter((tab) => {
+    .filter((tab, idx) => {
       const _tab = tab as ModuleBuiltinTab
-      if (_tab.show && !_tab.show())
+      if (tabShows[idx] && !toValue(tabShows[idx]))
         return false
       if (settings.hiddenTabs.value.includes(_tab.name))
         return false

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

@@ -22,9 +22,10 @@ const clientHooks = computed(() => client.value?.getClientHooksMetrics())
       <HooksTable :hooks="clientHooks" />
     </NSectionBlock>
     <NSectionBlock
+      v-if="serverHooks?.length"
       icon="carbon-ibm-cloud-direct-link-2-dedicated"
       text="Server Hooks"
-      :description="`Total hooks: ${serverHooks.length}`"
+      :description="`Total hooks: ${serverHooks?.length}`"
       padding="pl4 pr6"
     >
       <HooksTable :hooks="serverHooks" />

packages/devtools/client/pages/modules/server-routes.vue

@@ -7,7 +7,8 @@ definePageMeta({
   layout: 'full',
   category: 'server',
   show() {
-    return useServerRoutes().value?.length
+    const routes = useServerRoutes()
+    return () => routes.value?.length
   },
 })
 

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

@@ -4,7 +4,8 @@ definePageMeta({
   title: 'Terminals',
   layout: 'full',
   show() {
-    return !!useTerminals().value?.length
+    const terminals = useTerminals()
+    return () => !!terminals.value?.length
   },
   badge() {
     return useTerminals().value?.filter(i => !i.isTerminated).length

packages/devtools/client/pages/settings.vue

@@ -20,7 +20,7 @@ const scaleOptions = [
   ['Huge', 18 / 15],
 ]
 
-const categories = useCategorizedTabs(false)
+const categories = getCategorizedTabs(useAllTabs())
 
 function toggleTab(name: string, v: boolean) {
   if (v)