Skip to content

Commit

Permalink
docs: update
Browse files Browse the repository at this point in the history
  • Loading branch information
antfu committed Mar 14, 2023
1 parent fcc57f0 commit ba20357
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 3 deletions.
2 changes: 2 additions & 0 deletions docs/content/2.module/0.guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ nuxt.hook('devtools:customTabs', (tabs) => {
})
```

Learn more about [DevTools Utility Kit](/module/utils-kit).

## Lazy Service Launching

If the view you are contributing is heavy to load, you can have the tab first and let user launch it when they need it.
Expand Down
71 changes: 71 additions & 0 deletions docs/content/2.module/1.utils-kit.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
# Utility Kit

::alert{type=warning}
APIs are subject to change.
::

Since v0.3.0, we are now providing a utility kit for easier DevTools integrations, similar to `@nuxt/kit`.

It can be access via `@nuxt/devtools/kit`:

```ts
import { addCustomTab } from '@nuxt/devtools/kit'
```

Generally, we recommend to module authors to install `@nuxt/devtools` as a dev dependency and bundled `@nuxt/devtools/kit` into your module.

## `addCustomTab()`

A shorthand for calling the hook `devtools:customTabs`.

```ts
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()`

A shorthand for call hook `devtools:customTabs:refresh`. It will refresh all custom tabs.

## `startSubprocess()`

Start a sub process using `execa` and create a terminal tab in DevTools.

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

```ts
subprocess.restart()
subprocess.terminate()
```
File renamed without changes.
5 changes: 4 additions & 1 deletion docs/nuxt.config.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
export default defineNuxtConfig({
extends: '@nuxt-themes/docus',
modules: ['@nuxtjs/plausible'],
modules: [
'@nuxtjs/plausible',
'../local',
],
})
2 changes: 1 addition & 1 deletion packages/devtools/src/integrations/vscode.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export async function setup({ nuxt, options }: RPCContext) {
'serve-local',
'--accept-server-license-terms',
'--without-connection-token',
`--port=${port}`,
`--port=${port}`,
],
},
{
Expand Down
2 changes: 1 addition & 1 deletion packages/devtools/src/kit/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function refreshCustomTabs(nuxt = useNuxt()) {
return nuxt.callHook('devtools:customTabs:refresh')
}

interface SubprocessOptions extends ExecaOptions {
export interface SubprocessOptions extends ExecaOptions {
command: string
args?: string[]
}
Expand Down

0 comments on commit ba20357

Please sign in to comment.