模块作者 - Nuxt DevTools

Nuxt DevTools 旨在可扩展。您可以将您自己的模块集成到 DevTools 中。

入门模板

如果您想尝试与 Nuxt DevTools 集成，您可以运行

npx nuxi init my-module -t module-devtools

创建一个新的模块启动器，其中预先配置了 Nuxt DevTools 集成（作为选项卡贡献完全自定义视图）。

贡献视图

目前，贡献 Nuxt DevTools 视图的唯一方法是通过 iframe。您需要自己提供模块的视图，然后将其注册到 DevTools。

您可以使用 Nuxt DevTools 提供的工具包注册您的自定义选项卡

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',
  },
})

或者，如果您更喜欢使用 Nuxt 钩子

nuxt.hook('devtools:customTabs', (tabs) => {
  tabs.push({
    // 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',
    },
  })
})

了解更多关于 DevTools 工具包.

延迟服务启动

如果您贡献的视图加载很重，您可以先显示选项卡，让用户在需要时启动它。

let isReady = false
const promise: Promise<any> | null = null

async function launchService() {
  // ...launch your service
  isReady = true
}

nuxt.hook('devtools:customTabs', (tabs) => {
  tabs.push({
    name: 'my-module',
    title: 'My Module',
    view: isReady
      ? {
          type: 'iframe',
          src: '/url-to-your-module-view',
        }
      : {
          type: 'launch',
          description: 'Launch My Module',
          actions: [{
            label: 'Start',
            async handle() {
              if (!promise)
                promise = launchService()
              await promise
            },
          }]
        },
  })
})

它将首先显示一个带有按钮的启动页面，用于启动服务。当用户点击按钮时，handle() 将被调用，视图将更新为 iframe。

当您需要刷新自定义选项卡时，您可以调用 nuxt.callHook('devtools:customTabs:refresh')，并且 devtools:customTabs 上的钩子将被重新评估。

自定义视图的 API

请参考 Iframe 客户端.

自定义 RPC 函数

Nuxt DevTools 使用远程过程调用 (RPC) 来在服务器和客户端之间进行通信。对于模块，您也可以利用它来与服务器代码进行通信。

为此，我们建议首先在共享的 TypeScript 文件中定义您的类型

// rpc-types.ts

export interface ServerFunctions {
  getMyModuleOptions: () => MyModuleOptions
}

export interface ClientFunctions {
  showNotification: (message: string) => void
}

然后在您的模块代码中

import type { ClientFunctions, ServerFunctions } from './rpc-types'
import { extendServerRpc, onDevToolsInitialized } from '@nuxt/devtools-kit'
import { defineNuxtModule } from '@nuxt/kit'

const RPC_NAMESPACE = 'my-module-rpc'

export default defineNuxtModule({
  setup(options, nuxt) {
    // wait for DevTools to be initialized
    onDevToolsInitialized(async () => {
      const rpc = extendServerRpc<ClientFunctions, ServerFunctions>(RPC_NAMESPACE, {
        // register server RPC functions
        getMyModuleOptions() {
          return options
        },
      })

      // call client RPC functions
      // since it might have multiple clients connected, we use `broadcast` to call all of them
      await rpc.broadcast.showNotification('Hello from My Module!')
    })
  }
})

在嵌入式 iframe 客户端端，您可以执行以下操作

import type { ClientFunctions, ServerFunctions } from './rpc-types'
import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'

const RPC_NAMESPACE = 'my-module-rpc'

onDevtoolsClientConnected(async (client) => {
  const rpc = client.devtools.extendClientRpc(RPC_NAMESPACE, {
    showNotification(message) {
      console.log(message)
    },
  })

  // call server RPC functions
  const options = await rpc.getMyModuleOptions()
})

尝试本地更改

您可以克隆 Nuxt DevTools 仓库并在本地尝试您的更改。

请参考尝试本地更改.

示例

以下是一些关于如何在模块中集成 Nuxt DevTools 的示例

组合式函数

使用 useNuxtDevtools 组合式函数打开或控制 Nuxt DevTools。

工具包

用于更轻松地集成 DevTools 的工具包。