[{"data":1,"prerenderedAt":1022},["ShallowReactive",2],{"navigation":3,"docs-/module/guide":37,"docs-/module/guide-surround":435},[4,17,30],{"title":5,"_path":6,"children":7},"Guide","/guide",[8,11,14],{"title":9,"_path":10},"Getting Started","/guide/getting-started",{"title":12,"_path":13},"Features","/guide/features",{"title":15,"_path":16},"Composables","/guide/composables",{"title":18,"_path":19,"children":20},"Module","/module",[21,24,27],{"title":22,"_path":23},"Module Authors","/module/guide",{"title":25,"_path":26},"Utility Kit","/module/utils-kit",{"title":28,"_path":29},"UI Kit","/module/ui-kit",{"title":31,"_path":32,"children":33},"Development","/development",[34],{"title":35,"_path":36},"Contribution Guide","/development/contributing",{"_path":23,"_dir":38,"_draft":39,"_partial":39,"_locale":40,"title":22,"description":41,"body":42,"_type":429,"_id":430,"_source":431,"_file":432,"_stem":433,"_extension":434},"module",false,"","Add your own modules integration to the Nuxt DevTools.",{"type":43,"children":44,"toc":416},"root",[45,53,60,65,78,83,89,94,99,109,114,122,129,158,166,179,192,198,203,211,224,245,251,263,269,274,279,287,292,300,305,313,319,324,334,340,345,411],{"type":46,"tag":47,"props":48,"children":49},"element","p",{},[50],{"type":51,"value":52},"text","Nuxt DevTools is designed to be extensible. You can add your own modules integration to the DevTools.",{"type":46,"tag":54,"props":55,"children":57},"h2",{"id":56},"starter-template",[58],{"type":51,"value":59},"Starter Template",{"type":46,"tag":47,"props":61,"children":62},{},[63],{"type":51,"value":64},"If you want to try integrating with Nuxt DevTools, you can run",{"type":46,"tag":66,"props":67,"children":72},"pre",{"className":68,"code":69,"language":70,"meta":40,"style":71},"language-bash","npx nuxi init my-module -t module-devtools\n","bash","undefined",[73],{"type":46,"tag":74,"props":75,"children":76},"code",{"__ignoreMap":40},[77],{"type":51,"value":69},{"type":46,"tag":47,"props":79,"children":80},{},[81],{"type":51,"value":82},"to create a new module starter with Nuxt DevTools integration pre-configured (contributing a fully custom view as a tab).",{"type":46,"tag":54,"props":84,"children":86},{"id":85},"contributing-to-view",[87],{"type":51,"value":88},"Contributing to View",{"type":46,"tag":47,"props":90,"children":91},{},[92],{"type":51,"value":93},"Currently the only way to contribute to Nuxt DevTools View is via iframe. You need to serve your module's view yourself and then register it to the DevTools.",{"type":46,"tag":47,"props":95,"children":96},{},[97],{"type":51,"value":98},"You can use the utility kit provided by Nuxt DevTools to register your custom tab:",{"type":46,"tag":66,"props":100,"children":104},{"className":101,"code":102,"language":103,"meta":40,"style":71},"language-ts","import { addCustomTab } from '@nuxt/devtools-kit'\n\naddCustomTab({\n  // unique identifier\n  name: 'my-module',\n  // title to display in the tab\n  title: 'My Module',\n  // any icon from Iconify, or a URL to an image\n  icon: 'carbon:apps',\n  // iframe view\n  view: {\n    type: 'iframe',\n    src: '/url-to-your-module-view',\n  },\n})\n","ts",[105],{"type":46,"tag":74,"props":106,"children":107},{"__ignoreMap":40},[108],{"type":51,"value":102},{"type":46,"tag":47,"props":110,"children":111},{},[112],{"type":51,"value":113},"Or if you prefer to use Nuxt hooks:",{"type":46,"tag":66,"props":115,"children":117},{"className":101,"code":116,"language":103,"meta":40,"style":71},"nuxt.hook('devtools:customTabs', (tabs) => {\n  tabs.push({\n    // unique identifier\n    name: 'my-module',\n    // title to display in the tab\n    title: 'My Module',\n    // any icon from Iconify, or a URL to an image\n    icon: 'carbon:apps',\n    // iframe view\n    view: {\n      type: 'iframe',\n      src: '/url-to-your-module-view',\n    },\n  })\n})\n",[118],{"type":46,"tag":74,"props":119,"children":120},{"__ignoreMap":40},[121],{"type":51,"value":116},{"type":46,"tag":123,"props":124,"children":126},"h3",{"id":125},"iframe-permissions",[127],{"type":51,"value":128},"Iframe Permissions",{"type":46,"tag":47,"props":130,"children":131},{},[132,134,140,142,148,150,156],{"type":51,"value":133},"By default, iframes have ",{"type":46,"tag":74,"props":135,"children":137},{"className":136},[],[138],{"type":51,"value":139},"clipboard-write",{"type":51,"value":141}," and ",{"type":46,"tag":74,"props":143,"children":145},{"className":144},[],[146],{"type":51,"value":147},"clipboard-read",{"type":51,"value":149}," permissions enabled. You can add additional permissions using the ",{"type":46,"tag":74,"props":151,"children":153},{"className":152},[],[154],{"type":51,"value":155},"permissions",{"type":51,"value":157}," option:",{"type":46,"tag":66,"props":159,"children":161},{"className":101,"code":160,"language":103,"meta":40,"style":71},"const view: ModuleIframeView = {\n  type: 'iframe',\n  src: '/url-to-your-module-view',\n  // Additional permissions to allow in the iframe\n  permissions: ['camera', 'microphone', 'geolocation'],\n}\n",[162],{"type":46,"tag":74,"props":163,"children":164},{"__ignoreMap":40},[165],{"type":51,"value":160},{"type":46,"tag":47,"props":167,"children":168},{},[169,171,177],{"type":51,"value":170},"These permissions will be merged with the default ones and set on the iframe's ",{"type":46,"tag":74,"props":172,"children":174},{"className":173},[],[175],{"type":51,"value":176},"allow",{"type":51,"value":178}," attribute.",{"type":46,"tag":47,"props":180,"children":181},{},[182,184,190],{"type":51,"value":183},"Learn more about ",{"type":46,"tag":185,"props":186,"children":187},"a",{"href":26},[188],{"type":51,"value":189},"DevTools Utility Kit",{"type":51,"value":191},".",{"type":46,"tag":54,"props":193,"children":195},{"id":194},"lazy-service-launching",[196],{"type":51,"value":197},"Lazy Service Launching",{"type":46,"tag":47,"props":199,"children":200},{},[201],{"type":51,"value":202},"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.",{"type":46,"tag":66,"props":204,"children":206},{"className":101,"code":205,"language":103,"meta":40,"style":71},"let isReady = false\nconst promise: Promise\u003Cany> | null = null\n\nasync function launchService() {\n  // ...launch your service\n  isReady = true\n}\n\nnuxt.hook('devtools:customTabs', (tabs) => {\n  tabs.push({\n    name: 'my-module',\n    title: 'My Module',\n    view: isReady\n      ? {\n          type: 'iframe',\n          src: '/url-to-your-module-view',\n        }\n      : {\n          type: 'launch',\n          description: 'Launch My Module',\n          actions: [{\n            label: 'Start',\n            async handle() {\n              if (!promise)\n                promise = launchService()\n              await promise\n            },\n          }]\n        },\n  })\n})\n",[207],{"type":46,"tag":74,"props":208,"children":209},{"__ignoreMap":40},[210],{"type":51,"value":205},{"type":46,"tag":47,"props":212,"children":213},{},[214,216,222],{"type":51,"value":215},"It will first display a launch page with a button to start the service. When user click the button, the ",{"type":46,"tag":74,"props":217,"children":219},{"className":218},[],[220],{"type":51,"value":221},"handle()",{"type":51,"value":223}," will be called, and the view will be updated to iframe.",{"type":46,"tag":47,"props":225,"children":226},{},[227,229,235,237,243],{"type":51,"value":228},"When you need to refresh the custom tabs, you can call ",{"type":46,"tag":74,"props":230,"children":232},{"className":231},[],[233],{"type":51,"value":234},"nuxt.callHook('devtools:customTabs:refresh')",{"type":51,"value":236}," and the hooks on ",{"type":46,"tag":74,"props":238,"children":240},{"className":239},[],[241],{"type":51,"value":242},"devtools:customTabs",{"type":51,"value":244}," will be revaluated again.",{"type":46,"tag":54,"props":246,"children":248},{"id":247},"api-for-custom-view",[249],{"type":51,"value":250},"API for Custom View",{"type":46,"tag":47,"props":252,"children":253},{},[254,256,262],{"type":51,"value":255},"Please refer to ",{"type":46,"tag":185,"props":257,"children":259},{"href":258},"/module/utils-kit#nuxtdevtools-kitiframe-client",[260],{"type":51,"value":261},"Iframe Client",{"type":51,"value":191},{"type":46,"tag":54,"props":264,"children":266},{"id":265},"custom-rpc-functions",[267],{"type":51,"value":268},"Custom RPC Functions",{"type":46,"tag":47,"props":270,"children":271},{},[272],{"type":51,"value":273},"Nuxt DevTools uses Remote Procedure Call (RPC) to communicate between the server and client. For modules you can also leverage that to communicate your server code.",{"type":46,"tag":47,"props":275,"children":276},{},[277],{"type":51,"value":278},"To do that, we recommend to define your types in a shared TypeScript file first:",{"type":46,"tag":66,"props":280,"children":282},{"className":101,"code":281,"language":103,"meta":40,"style":71},"// rpc-types.ts\n\nexport interface ServerFunctions {\n  getMyModuleOptions: () => MyModuleOptions\n}\n\nexport interface ClientFunctions {\n  showNotification: (message: string) => void\n}\n",[283],{"type":46,"tag":74,"props":284,"children":285},{"__ignoreMap":40},[286],{"type":51,"value":281},{"type":46,"tag":47,"props":288,"children":289},{},[290],{"type":51,"value":291},"And then in your module code:",{"type":46,"tag":66,"props":293,"children":295},{"className":101,"code":294,"language":103,"meta":40,"style":71},"import type { ClientFunctions, ServerFunctions } from './rpc-types'\nimport { extendServerRpc, onDevToolsInitialized } from '@nuxt/devtools-kit'\nimport { defineNuxtModule } from '@nuxt/kit'\n\nconst RPC_NAMESPACE = 'my-module-rpc'\n\nexport default defineNuxtModule({\n  setup(options, nuxt) {\n    // wait for DevTools to be initialized\n    onDevToolsInitialized(async () => {\n      const rpc = extendServerRpc\u003CClientFunctions, ServerFunctions>(RPC_NAMESPACE, {\n        // register server RPC functions\n        getMyModuleOptions() {\n          return options\n        },\n      })\n\n      // call client RPC functions\n      // since it might have multiple clients connected, we use `broadcast` to call all of them\n      await rpc.broadcast.showNotification('Hello from My Module!')\n    })\n  }\n})\n",[296],{"type":46,"tag":74,"props":297,"children":298},{"__ignoreMap":40},[299],{"type":51,"value":294},{"type":46,"tag":47,"props":301,"children":302},{},[303],{"type":51,"value":304},"And on the embedded iframe client side, you can do:",{"type":46,"tag":66,"props":306,"children":308},{"className":101,"code":307,"language":103,"meta":40,"style":71},"import type { ClientFunctions, ServerFunctions } from './rpc-types'\nimport { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'\n\nconst RPC_NAMESPACE = 'my-module-rpc'\n\nonDevtoolsClientConnected(async (client) => {\n  const rpc = client.devtools.extendClientRpc(RPC_NAMESPACE, {\n    showNotification(message) {\n      console.log(message)\n    },\n  })\n\n  // call server RPC functions\n  const options = await rpc.getMyModuleOptions()\n})\n",[309],{"type":46,"tag":74,"props":310,"children":311},{"__ignoreMap":40},[312],{"type":51,"value":307},{"type":46,"tag":54,"props":314,"children":316},{"id":315},"trying-local-changes",[317],{"type":51,"value":318},"Trying Local Changes",{"type":46,"tag":47,"props":320,"children":321},{},[322],{"type":51,"value":323},"You can clone Nuxt DevTools repo and try your changes locally.",{"type":46,"tag":47,"props":325,"children":326},{},[327,328,333],{"type":51,"value":255},{"type":46,"tag":185,"props":329,"children":331},{"href":330},"/development/contributing#trying-local-changes",[332],{"type":51,"value":318},{"type":51,"value":191},{"type":46,"tag":54,"props":335,"children":337},{"id":336},"examples",[338],{"type":51,"value":339},"Examples",{"type":46,"tag":47,"props":341,"children":342},{},[343],{"type":51,"value":344},"Here are a few examples of how to integrate Nuxt DevTools in modules:",{"type":46,"tag":346,"props":347,"children":348},"ul",{},[349,361,371,381,391,401],{"type":46,"tag":350,"props":351,"children":352},"li",{},[353],{"type":46,"tag":185,"props":354,"children":358},{"href":355,"rel":356},"https://github.com/nuxt/devtools/blob/a8d372bd10d34d8c2fba2613558df2b9b99d6ff9/packages/devtools/src/integrations/vscode.ts#L140-L172",[357],"nofollow",[359],{"type":51,"value":360},"Built-in VS Code integration with lazy initialize",{"type":46,"tag":350,"props":362,"children":363},{},[364],{"type":46,"tag":185,"props":365,"children":368},{"href":366,"rel":367},"https://github.com/vueuse/vueuse/blob/ce28cef154489c73abe308104bef8568594a9bcd/packages/nuxt/index.ts#L89-L99",[357],[369],{"type":51,"value":370},"VueUse adds a docs tab",{"type":46,"tag":350,"props":372,"children":373},{},[374],{"type":46,"tag":185,"props":375,"children":378},{"href":376,"rel":377},"https://github.com/unocss/unocss/blob/25021a751494e99e85cfd82cca3855cdf78f6a12/packages/nuxt/src/index.ts#L81-L94",[357],[379],{"type":51,"value":380},"UnoCSS Inspector",{"type":46,"tag":350,"props":382,"children":383},{},[384],{"type":46,"tag":185,"props":385,"children":388},{"href":386,"rel":387},"https://github.com/nuxt/test-utils/blob/fd024f45f752c2faa4c9e0cc1fc1f8b3eae59553/src/module.ts#L150-L192",[357],[389],{"type":51,"value":390},"Nuxt Test Utils",{"type":46,"tag":350,"props":392,"children":393},{},[394],{"type":46,"tag":185,"props":395,"children":398},{"href":396,"rel":397},"https://github.com/nuxt-modules/og-image/blob/551b5474b44b8ff3190643e861c0b453813683b0/src/build/devtools.ts#L65-L80",[357],[399],{"type":51,"value":400},"Nuxt OG Image Playground",{"type":46,"tag":350,"props":402,"children":403},{},[404],{"type":46,"tag":185,"props":405,"children":408},{"href":406,"rel":407},"https://github.com/arashsheyda/nuxt-mongoose/blob/89d50bd977de0f4edfdbe3ed150d0dca4d040709/src/devtools.ts#L38-L48",[357],[409],{"type":51,"value":410},"Nuxt Mongoose",{"type":46,"tag":412,"props":413,"children":414},"style",{},[415],{"type":51,"value":40},{"title":40,"searchDepth":417,"depth":417,"links":418},2,[419,420,424,425,426,427,428],{"id":56,"depth":417,"text":59},{"id":85,"depth":417,"text":88,"children":421},[422],{"id":125,"depth":423,"text":128},3,{"id":194,"depth":417,"text":197},{"id":247,"depth":417,"text":250},{"id":265,"depth":417,"text":268},{"id":315,"depth":417,"text":318},{"id":336,"depth":417,"text":339},"markdown","content:2.module:0.guide.md","content","2.module/0.guide.md","2.module/0.guide","md",[436,491],{"_path":16,"_dir":437,"_draft":39,"_partial":39,"_locale":40,"title":15,"description":438,"body":439,"_type":429,"_id":488,"_source":431,"_file":489,"_stem":490,"_extension":434},"guide","Open or control Nuxt DevTools with the useNuxtDevtools composable.",{"type":43,"children":440,"toc":486},[441,454,464,469,477,482],{"type":46,"tag":47,"props":442,"children":443},{},[444,446,452],{"type":51,"value":445},"In case you might want to open or control the Nuxt DevTools in your application on development, a composable ",{"type":46,"tag":74,"props":447,"children":449},{"className":448},[],[450],{"type":51,"value":451},"useNuxtDevtools",{"type":51,"value":453}," is registered with auto-import.",{"type":46,"tag":66,"props":455,"children":459},{"className":456,"code":457,"language":458,"meta":40,"style":71},"language-vue","\u003Cscript setup>\n// Returns undefined in production mode or when the DevTools are not enabled\nconst devtoolsClient = useNuxtDevTools() // NuxtDevToolsHostClient | undefined\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cbutton\n    v-if=\"devtoolsClient\"\n    @click=\"devtoolsClient.devtools.navigate('/modules/components')\"\n  >\n    \u003C!-- Open the DevTools and navigate to the components tab -->\n    Open DevTools\n  \u003C/button>\n\u003C/template>\n","vue",[460],{"type":46,"tag":74,"props":461,"children":462},{"__ignoreMap":40},[463],{"type":51,"value":457},{"type":46,"tag":47,"props":465,"children":466},{},[467],{"type":51,"value":468},"When you have auto-import disabled, you can also import it explicitly:",{"type":46,"tag":66,"props":470,"children":472},{"className":101,"code":471,"language":103,"meta":40,"style":71},"import { useNuxtDevTools } from '#imports'\n",[473],{"type":46,"tag":74,"props":474,"children":475},{"__ignoreMap":40},[476],{"type":51,"value":471},{"type":46,"tag":47,"props":478,"children":479},{},[480],{"type":51,"value":481},"Checkout it's type definition for more available methods.",{"type":46,"tag":412,"props":483,"children":484},{},[485],{"type":51,"value":40},{"title":40,"searchDepth":417,"depth":417,"links":487},[],"content:1.guide:2.composables.md","1.guide/2.composables.md","1.guide/2.composables",{"_path":26,"_dir":38,"_draft":39,"_partial":39,"_locale":40,"title":25,"description":492,"body":493,"_type":429,"_id":1019,"_source":431,"_file":1020,"_stem":1021,"_extension":434},"Utility kit for easier DevTools integrations.",{"type":43,"children":494,"toc":1003},[495,507,515,523,544,553,563,574,582,587,642,650,660,673,683,696,704,712,722,727,735,746,756,761,766,774,795,804,825,835,860,870,875,883,893,905,913,923,935,945,963,971,981,991,999],{"type":46,"tag":47,"props":496,"children":497},{},[498,500,506],{"type":51,"value":499},"Since v0.3.0, we are now providing a utility kit for easier DevTools integrations, similar to ",{"type":46,"tag":74,"props":501,"children":503},{"className":502},[],[504],{"type":51,"value":505},"@nuxt/kit",{"type":51,"value":191},{"type":46,"tag":66,"props":508,"children":510},{"className":68,"code":509,"language":70,"meta":40,"style":71},"npm i @nuxt/devtools-kit\n",[511],{"type":46,"tag":74,"props":512,"children":513},{"__ignoreMap":40},[514],{"type":51,"value":509},{"type":46,"tag":66,"props":516,"children":518},{"className":101,"code":517,"language":103,"meta":40,"style":71},"import { addCustomTab } from '@nuxt/devtools-kit'\n",[519],{"type":46,"tag":74,"props":520,"children":521},{"__ignoreMap":40},[522],{"type":51,"value":517},{"type":46,"tag":47,"props":524,"children":525},{},[526,528,534,536,542],{"type":51,"value":527},"We recommend module authors to install ",{"type":46,"tag":74,"props":529,"children":531},{"className":530},[],[532],{"type":51,"value":533},"@nuxt/devtools-kit",{"type":51,"value":535}," as a dependency and ",{"type":46,"tag":74,"props":537,"children":539},{"className":538},[],[540],{"type":51,"value":541},"@nuxt/devtools",{"type":51,"value":543}," as a dev dependency.",{"type":46,"tag":54,"props":545,"children":547},{"id":546},"nuxtdevtools-kit",[548],{"type":46,"tag":74,"props":549,"children":551},{"className":550},[],[552],{"type":51,"value":533},{"type":46,"tag":123,"props":554,"children":556},{"id":555},"addcustomtab",[557],{"type":46,"tag":74,"props":558,"children":560},{"className":559},[],[561],{"type":51,"value":562},"addCustomTab()",{"type":46,"tag":47,"props":564,"children":565},{},[566,568,573],{"type":51,"value":567},"A shorthand for calling the hook ",{"type":46,"tag":74,"props":569,"children":571},{"className":570},[],[572],{"type":51,"value":242},{"type":51,"value":191},{"type":46,"tag":66,"props":575,"children":577},{"className":101,"code":576,"language":103,"meta":40,"style":71},"import { addCustomTab } from '@nuxt/devtools-kit'\n\naddCustomTab(() => ({\n  // unique identifier\n  name: 'my-module',\n  // title to display in the tab\n  title: 'My Module',\n  // any icon from Iconify, or a URL to an image\n  icon: 'carbon:apps',\n  // iframe view\n  view: {\n    type: 'iframe',\n    src: '/url-to-your-module-view',\n  },\n}))\n",[578],{"type":46,"tag":74,"props":579,"children":580},{"__ignoreMap":40},[581],{"type":51,"value":576},{"type":46,"tag":47,"props":583,"children":584},{},[585],{"type":51,"value":586},"The iframe view supports the following options:",{"type":46,"tag":346,"props":588,"children":589},{},[590,601,620],{"type":46,"tag":350,"props":591,"children":592},{},[593,599],{"type":46,"tag":74,"props":594,"children":596},{"className":595},[],[597],{"type":51,"value":598},"src",{"type":51,"value":600},": URL of the iframe",{"type":46,"tag":350,"props":602,"children":603},{},[604,610,612,618],{"type":46,"tag":74,"props":605,"children":607},{"className":606},[],[608],{"type":51,"value":609},"persistent",{"type":51,"value":611},": Whether to persist the iframe instance when switching tabs (default: ",{"type":46,"tag":74,"props":613,"children":615},{"className":614},[],[616],{"type":51,"value":617},"true",{"type":51,"value":619},")",{"type":46,"tag":350,"props":621,"children":622},{},[623,628,630,635,636,641],{"type":46,"tag":74,"props":624,"children":626},{"className":625},[],[627],{"type":51,"value":155},{"type":51,"value":629},": Additional permissions to allow in the iframe (merged with default ",{"type":46,"tag":74,"props":631,"children":633},{"className":632},[],[634],{"type":51,"value":139},{"type":51,"value":141},{"type":46,"tag":74,"props":637,"children":639},{"className":638},[],[640],{"type":51,"value":147},{"type":51,"value":619},{"type":46,"tag":66,"props":643,"children":645},{"className":101,"code":644,"language":103,"meta":40,"style":71},"const view: ModuleIframeView = {\n  type: 'iframe',\n  src: '/url-to-your-module-view',\n  persistent: true,\n  permissions: ['camera', 'microphone'],\n}\n",[646],{"type":46,"tag":74,"props":647,"children":648},{"__ignoreMap":40},[649],{"type":51,"value":644},{"type":46,"tag":123,"props":651,"children":653},{"id":652},"refreshcustomtabs",[654],{"type":46,"tag":74,"props":655,"children":657},{"className":656},[],[658],{"type":51,"value":659},"refreshCustomTabs()",{"type":46,"tag":47,"props":661,"children":662},{},[663,665,671],{"type":51,"value":664},"A shorthand for call hook ",{"type":46,"tag":74,"props":666,"children":668},{"className":667},[],[669],{"type":51,"value":670},"devtools:customTabs:refresh",{"type":51,"value":672},". It will refresh all custom tabs.",{"type":46,"tag":123,"props":674,"children":676},{"id":675},"startsubprocess",[677],{"type":46,"tag":74,"props":678,"children":680},{"className":679},[],[681],{"type":51,"value":682},"startSubprocess()",{"type":46,"tag":47,"props":684,"children":685},{},[686,688,694],{"type":51,"value":687},"Start a sub process using ",{"type":46,"tag":74,"props":689,"children":691},{"className":690},[],[692],{"type":51,"value":693},"execa",{"type":51,"value":695}," and create a terminal tab in DevTools.",{"type":46,"tag":66,"props":697,"children":699},{"className":101,"code":698,"language":103,"meta":40,"style":71},"import { startSubprocess } from '@nuxt/devtools-kit'\n\nconst subprocess = startSubprocess(\n  {\n    command: 'code-server',\n    args: [\n      'serve-local',\n      '--accept-server-license-terms',\n      '--without-connection-token',\n      `--port=${port}`,\n    ],\n  },\n  {\n    id: 'devtools:vscode',\n    name: 'VS Code Server',\n    icon: 'logos-visual-studio-code',\n  },\n)\n",[700],{"type":46,"tag":74,"props":701,"children":702},{"__ignoreMap":40},[703],{"type":51,"value":698},{"type":46,"tag":66,"props":705,"children":707},{"className":101,"code":706,"language":103,"meta":40,"style":71},"subprocess.restart()\nsubprocess.terminate()\n",[708],{"type":46,"tag":74,"props":709,"children":710},{"__ignoreMap":40},[711],{"type":51,"value":706},{"type":46,"tag":123,"props":713,"children":715},{"id":714},"extendserverrpc",[716],{"type":46,"tag":74,"props":717,"children":719},{"className":718},[],[720],{"type":51,"value":721},"extendServerRpc()",{"type":46,"tag":47,"props":723,"children":724},{},[725],{"type":51,"value":726},"Extend the server RPC with your own methods.",{"type":46,"tag":66,"props":728,"children":730},{"className":101,"code":729,"language":103,"meta":40,"style":71},"import { extendServerRpc } from '@nuxt/devtools-kit'\n\nconst rpc = extendServerRpc('my-module', {\n  async myMethod() {\n    return 'hello'\n  },\n})\n",[731],{"type":46,"tag":74,"props":732,"children":733},{"__ignoreMap":40},[734],{"type":51,"value":729},{"type":46,"tag":47,"props":736,"children":737},{},[738,739,745],{"type":51,"value":183},{"type":46,"tag":185,"props":740,"children":742},{"href":741},"/module/guide#custom-rpc-functions",[743],{"type":51,"value":744},"Custom RPC functions",{"type":51,"value":191},{"type":46,"tag":54,"props":747,"children":749},{"id":748},"nuxtdevtools-kitiframe-client",[750],{"type":46,"tag":74,"props":751,"children":753},{"className":752},[],[754],{"type":51,"value":755},"@nuxt/devtools-kit/iframe-client",{"type":46,"tag":47,"props":757,"children":758},{},[759],{"type":51,"value":760},"To provide complex interactions for your module integrations, we recommend to host your own view and display it in devtools via iframe.",{"type":46,"tag":47,"props":762,"children":763},{},[764],{"type":51,"value":765},"To get the infomation from the devtools and the client app, you can do this in your client app:",{"type":46,"tag":66,"props":767,"children":769},{"className":101,"code":768,"language":103,"meta":40,"style":71},"import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'\n\nexport const devtoolsClient = useDevtoolsClient()\n",[770],{"type":46,"tag":74,"props":771,"children":772},{"__ignoreMap":40},[773],{"type":51,"value":768},{"type":46,"tag":47,"props":775,"children":776},{},[777,779,785,787,793],{"type":51,"value":778},"When the iframe been served with the same origin (CORS limitation), devtools will automatically inject ",{"type":46,"tag":74,"props":780,"children":782},{"className":781},[],[783],{"type":51,"value":784},"__NUXT_DEVTOOLS__",{"type":51,"value":786}," to the iframe's window object. You can access it as a ref using ",{"type":46,"tag":74,"props":788,"children":790},{"className":789},[],[791],{"type":51,"value":792},"useDevtoolsClient()",{"type":51,"value":794}," utility.",{"type":46,"tag":123,"props":796,"children":798},{"id":797},"usedevtoolsclient",[799],{"type":46,"tag":74,"props":800,"children":802},{"className":801},[],[803],{"type":51,"value":792},{"type":46,"tag":47,"props":805,"children":806},{},[807,809,815,817,823],{"type":51,"value":808},"It will return a ref of ",{"type":46,"tag":74,"props":810,"children":812},{"className":811},[],[813],{"type":51,"value":814},"NuxtDevtoolsIframeClient",{"type":51,"value":816}," object that are intially ",{"type":46,"tag":74,"props":818,"children":820},{"className":819},[],[821],{"type":51,"value":822},"null",{"type":51,"value":824}," and will be updated when the connection is ready.",{"type":46,"tag":47,"props":826,"children":827},{},[828,833],{"type":46,"tag":74,"props":829,"children":831},{"className":830},[],[832],{"type":51,"value":814},{"type":51,"value":834}," contains two properties:",{"type":46,"tag":346,"props":836,"children":837},{},[838,849],{"type":46,"tag":350,"props":839,"children":840},{},[841,847],{"type":46,"tag":74,"props":842,"children":844},{"className":843},[],[845],{"type":51,"value":846},"host",{"type":51,"value":848},": APIs to communicate with the main app in browser",{"type":46,"tag":350,"props":850,"children":851},{},[852,858],{"type":46,"tag":74,"props":853,"children":855},{"className":854},[],[856],{"type":51,"value":857},"devtools",{"type":51,"value":859},": APIs to communicate with the devtools",{"type":46,"tag":47,"props":861,"children":862},{},[863,868],{"type":46,"tag":74,"props":864,"children":866},{"className":865},[],[867],{"type":51,"value":846},{"type":51,"value":869}," can be undefined when devtools are accessed standalone or from a different origin.",{"type":46,"tag":47,"props":871,"children":872},{},[873],{"type":51,"value":874},"For example, you can get the router instance from the client app:",{"type":46,"tag":66,"props":876,"children":878},{"className":101,"code":877,"language":103,"meta":40,"style":71},"const router = computed(() => devtoolsClient.value?.host?.nuxt.vueApp.config.globalProperties?.$router)\n",[879],{"type":46,"tag":74,"props":880,"children":881},{"__ignoreMap":40},[882],{"type":51,"value":877},{"type":46,"tag":123,"props":884,"children":886},{"id":885},"ondevtoolsclientconnected",[887],{"type":46,"tag":74,"props":888,"children":890},{"className":889},[],[891],{"type":51,"value":892},"onDevtoolsClientConnected()",{"type":46,"tag":47,"props":894,"children":895},{},[896,898,903],{"type":51,"value":897},"Similiar to ",{"type":46,"tag":74,"props":899,"children":901},{"className":900},[],[902],{"type":51,"value":792},{"type":51,"value":904}," but as a callback style:",{"type":46,"tag":66,"props":906,"children":908},{"className":101,"code":907,"language":103,"meta":40,"style":71},"import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'\n\nonDevtoolsClientConnected(async (client) => {\n  // client is NuxtDevtoolsIframeClient\n\n  const config = client.devtools.rpc.getServerConfig()\n  // ...\n})\n",[909],{"type":46,"tag":74,"props":910,"children":911},{"__ignoreMap":40},[912],{"type":51,"value":907},{"type":46,"tag":54,"props":914,"children":916},{"id":915},"nuxtdevtools-kithost-client",[917],{"type":46,"tag":74,"props":918,"children":920},{"className":919},[],[921],{"type":51,"value":922},"@nuxt/devtools-kit/host-client",{"type":46,"tag":47,"props":924,"children":925},{},[926,928,933],{"type":51,"value":927},"When you have iframe for your devtools view, sometimes you need to communicate with the devtools host (the main app in browser) with a runtime plugin. You can use ",{"type":46,"tag":74,"props":929,"children":931},{"className":930},[],[932],{"type":51,"value":922},{"type":51,"value":934}," to do that.",{"type":46,"tag":123,"props":936,"children":938},{"id":937},"usedevtoolshostclient",[939],{"type":46,"tag":74,"props":940,"children":942},{"className":941},[],[943],{"type":51,"value":944},"useDevtoolsHostClient()",{"type":46,"tag":47,"props":946,"children":947},{},[948,949,955,956,961],{"type":51,"value":808},{"type":46,"tag":74,"props":950,"children":952},{"className":951},[],[953],{"type":51,"value":954},"NuxtDevtoolsHostClient",{"type":51,"value":816},{"type":46,"tag":74,"props":957,"children":959},{"className":958},[],[960],{"type":51,"value":822},{"type":51,"value":962}," and will be updated when the host is initialized by NuxtDevtools.",{"type":46,"tag":66,"props":964,"children":966},{"className":101,"code":965,"language":103,"meta":40,"style":71},"import { useDevtoolsHostClient } from '@nuxt/devtools-kit/host-client'\n\nexport default defineNuxtPlugin({\n  name: 'my-module:devtools',\n  setup(nuxtApp) {\n    const devtoolsHost = useDevtoolsHostClient()\n\n    // ...\n  }\n})\n",[967],{"type":46,"tag":74,"props":968,"children":969},{"__ignoreMap":40},[970],{"type":51,"value":965},{"type":46,"tag":123,"props":972,"children":974},{"id":973},"ondevtoolshostclientconnected",[975],{"type":46,"tag":74,"props":976,"children":978},{"className":977},[],[979],{"type":51,"value":980},"onDevtoolsHostClientConnected()",{"type":46,"tag":47,"props":982,"children":983},{},[984,985,990],{"type":51,"value":897},{"type":46,"tag":74,"props":986,"children":988},{"className":987},[],[989],{"type":51,"value":944},{"type":51,"value":904},{"type":46,"tag":66,"props":992,"children":994},{"className":101,"code":993,"language":103,"meta":40,"style":71},"import { onDevtoolsHostClientConnected } from '@nuxt/devtools-kit/host-client'\n\nonDevtoolsHostClientConnected(async (host) => {\n\n})\n",[995],{"type":46,"tag":74,"props":996,"children":997},{"__ignoreMap":40},[998],{"type":51,"value":993},{"type":46,"tag":412,"props":1000,"children":1001},{},[1002],{"type":51,"value":40},{"title":40,"searchDepth":417,"depth":417,"links":1004},[1005,1011,1015],{"id":546,"depth":417,"text":533,"children":1006},[1007,1008,1009,1010],{"id":555,"depth":423,"text":562},{"id":652,"depth":423,"text":659},{"id":675,"depth":423,"text":682},{"id":714,"depth":423,"text":721},{"id":748,"depth":417,"text":755,"children":1012},[1013,1014],{"id":797,"depth":423,"text":792},{"id":885,"depth":423,"text":892},{"id":915,"depth":417,"text":922,"children":1016},[1017,1018],{"id":937,"depth":423,"text":944},{"id":973,"depth":423,"text":980},"content:2.module:1.utils-kit.md","2.module/1.utils-kit.md","2.module/1.utils-kit",1787397639239]