实用工具包 - Nuxt DevTools

从 v0.3.0 开始，我们现在提供了一个实用工具包，用于简化 DevTools 集成，类似于 @nuxt/kit。

npm i @nuxt/devtools-kit

import { addCustomTab } from '@nuxt/devtools-kit'

我们建议模块作者安装 @nuxt/devtools-kit 作为依赖项，并将 @nuxt/devtools 作为开发依赖项。

`@nuxt/devtools-kit`

`addCustomTab()`

调用钩子 devtools:customTabs 的简写。

import { addCustomTab } from '@nuxt/devtools-kit'

addCustomTab(() => ({
  // unique identifier
  name: 'my-module',
  // title to display in the tab
  title: 'My Module',
  // any icon from Iconify, or a URL to an image
  icon: 'carbon:apps',
  // iframe view
  view: {
    type: 'iframe',
    src: '/url-to-your-module-view',
  },
}))

`refreshCustomTabs()`

调用钩子 devtools:customTabs:refresh 的简写。它将刷新所有自定义选项卡。

`startSubprocess()`

使用 execa 启动子进程并在 DevTools 中创建终端选项卡。

import { startSubprocess } from '@nuxt/devtools-kit'

const subprocess = startSubprocess(
  {
    command: 'code-server',
    args: [
      'serve-local',
      '--accept-server-license-terms',
      '--without-connection-token',
      `--port=${port}`,
    ],
  },
  {
    id: 'devtools:vscode',
    name: 'VS Code Server',
    icon: 'logos-visual-studio-code',
  },
)

subprocess.restart()
subprocess.terminate()

`extendServerRpc()`

使用您自己的方法扩展服务器 RPC。

import { extendServerRpc } from '@nuxt/devtools-kit'

const rpc = extendServerRpc('my-module', {
  async myMethod() {
    return 'hello'
  },
})

了解更多关于自定义 RPC 函数。

`@nuxt/devtools-kit/iframe-client`

为了为您的模块集成提供复杂的交互，我们建议您托管自己的视图并通过 iframe 在 devtools 中显示它。

为了从 devtools 和客户端应用程序获取信息，您可以在客户端应用程序中执行此操作

import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'

export const devtoolsClient = useDevtoolsClient()

当 iframe 使用相同来源（CORS 限制）提供服务时，devtools 将自动将 __NUXT_DEVTOOLS__ 注入 iframe 的窗口对象中。您可以使用 useDevtoolsClient() 实用程序将其作为引用访问。

`useDevtoolsClient()`

它将返回一个 NuxtDevtoolsIframeClient 对象的引用，该对象最初为 null，并在连接就绪后更新。

NuxtDevtoolsIframeClient 包含两个属性

host: 与浏览器中主应用程序通信的 API
devtools: 与 devtools 通信的 API

当 devtools 独立访问或来自不同来源时，host 可能未定义。

例如，您可以从客户端应用程序获取路由实例

const router = computed(() => devtoolsClient.value?.host?.nuxt.vueApp.config.globalProperties?.$router)

`onDevtoolsClientConnected()`

类似于 useDevtoolsClient()，但采用回调样式

import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'

onDevtoolsClientConnected(async (client) => {
  // client is NuxtDevtoolsIframeClient

  const config = client.devtools.rpc.getServerConfig()
  // ...
})

`@nuxt/devtools-kit/host-client`

当您拥有 devtools 视图的 iframe 时，有时您需要使用运行时插件与 devtools 主机（浏览器中的主应用程序）进行通信。您可以使用 @nuxt/devtools-kit/host-client 来执行此操作。

`useDevtoolsHostClient()`

它将返回一个 NuxtDevtoolsHostClient 对象的引用，该对象最初为 null，并在 NuxtDevtools 初始化主机后更新。

import { useDevtoolsHostClient } from '@nuxt/devtools-kit/host-client'

export default defineNuxtPlugin({
  name: 'my-module:devtools',
  setup(nuxtApp) {
    const devtoolsHost = useDevtoolsHostClient()

    // ...
  }
})

`onDevtoolsHostClientConnected()`

类似于 useDevtoolsHostClient()，但采用回调样式

import { onDevtoolsHostClientConnected } from '@nuxt/devtools-kit/host-client'

onDevtoolsHostClientConnected(async (host) => {

})

模块作者

将您自己的模块集成添加到 Nuxt DevTools。

UI 工具包

UI 工具包供模块作者构建自定义视图。