[{"data":1,"prerenderedAt":1162},["ShallowReactive",2],{"navigation":3,"docs-/module/ui-kit":37,"docs-/module/ui-kit-surround":369},[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":29,"_dir":38,"_draft":39,"_partial":39,"_locale":40,"title":28,"description":41,"body":42,"_type":364,"_id":365,"_source":366,"_file":367,"_stem":368,"_extension":212},"module",false,"","UI Kit is for module authors to build a custom view.",{"type":43,"children":44,"toc":354},"root",[45,65,85,92,105,112,124,134,140,171,184,194,237,245,250,258,263,271,285,291,304,310,323,328,336,349],{"type":46,"tag":47,"props":48,"children":49},"element","callout",{},[50],{"type":46,"tag":51,"props":52,"children":53},"p",{},[54,57,63],{"type":55,"value":56},"text","We suggest you to read the ",{"type":46,"tag":58,"props":59,"children":60},"a",{"href":23},[61],{"type":55,"value":62},"Module Authors Guide",{"type":55,"value":64}," first.",{"type":46,"tag":51,"props":66,"children":67},{},[68,70,83],{"type":55,"value":69},"DevTools UI Kit is for module authors to build the custom view with the similiar look and feel as built-in DevTools UI. The source code can be found under ",{"type":46,"tag":58,"props":71,"children":75},{"href":72,"rel":73},"https://github.com/nuxt/devtools/tree/main/packages/devtools-ui-kit",[74],"nofollow",[76],{"type":46,"tag":77,"props":78,"children":80},"code",{"className":79},[],[81],{"type":55,"value":82},"packages/devtools-ui-kit",{"type":55,"value":84},".",{"type":46,"tag":86,"props":87,"children":89},"h2",{"id":88},"installation",[90],{"type":55,"value":91},"Installation",{"type":46,"tag":51,"props":93,"children":94},{},[95,97,103],{"type":55,"value":96},"We recommend to use the ",{"type":46,"tag":58,"props":98,"children":100},{"href":99},"/module/guide#starter-template",[101],{"type":55,"value":102},"Starter Template",{"type":55,"value":104}," for authoring a DevTools integration for your module, which has the set up built in and ready to use.",{"type":46,"tag":106,"props":107,"children":109},"h3",{"id":108},"manual-install",[110],{"type":55,"value":111},"Manual Install",{"type":46,"tag":113,"props":114,"children":119},"pre",{"className":115,"code":116,"language":117,"meta":40,"style":118},"language-bash","npm i @nuxt/devtools-ui-kit\n","bash","undefined",[120],{"type":46,"tag":77,"props":121,"children":122},{"__ignoreMap":40},[123],{"type":55,"value":116},{"type":46,"tag":113,"props":125,"children":129},{"className":126,"code":127,"language":128,"meta":40,"style":118},"language-ts","export default defineNuxtConfig({\n  modules: [\n    '@nuxt/devtools-ui-kit'\n  ]\n})\n","ts",[130],{"type":46,"tag":77,"props":131,"children":132},{"__ignoreMap":40},[133],{"type":55,"value":127},{"type":46,"tag":86,"props":135,"children":137},{"id":136},"usage",[138],{"type":55,"value":139},"Usage",{"type":46,"tag":51,"props":141,"children":142},{},[143,145,151,153,160,162,169],{"type":55,"value":144},"Under the hood, ",{"type":46,"tag":77,"props":146,"children":148},{"className":147},[],[149],{"type":55,"value":150},"@nuxt/devtools-ui-kit",{"type":55,"value":152}," is an unbundled component library powered by ",{"type":46,"tag":58,"props":154,"children":157},{"href":155,"rel":156},"https://github.com/unocss/unocss",[74],[158],{"type":55,"value":159},"UnoCSS",{"type":55,"value":161}," and ",{"type":46,"tag":58,"props":163,"children":166},{"href":164,"rel":165},"https://vueuse.org/",[74],[167],{"type":55,"value":168},"VueUse",{"type":55,"value":170},". Components are auto imported.",{"type":46,"tag":51,"props":172,"children":173},{},[174,176,182],{"type":55,"value":175},"In this library, we introduced the ",{"type":46,"tag":77,"props":177,"children":179},{"className":178},[],[180],{"type":55,"value":181},"n",{"type":55,"value":183}," attribute for every component to customize the styles and variations. For example, to make a red button:",{"type":46,"tag":113,"props":185,"children":189},{"className":186,"code":187,"language":188,"meta":40,"style":118},"language-html","\u003CNButton n=\"red\" />\n","html",[190],{"type":46,"tag":77,"props":191,"children":192},{"__ignoreMap":40},[193],{"type":55,"value":187},{"type":46,"tag":51,"props":195,"children":196},{},[197,199,205,207,213,214,220,222,228,230,235],{"type":55,"value":198},"to make it larger, add the size specifier (",{"type":46,"tag":77,"props":200,"children":202},{"className":201},[],[203],{"type":55,"value":204},"sm",{"type":55,"value":206},", ",{"type":46,"tag":77,"props":208,"children":210},{"className":209},[],[211],{"type":55,"value":212},"md",{"type":55,"value":206},{"type":46,"tag":77,"props":215,"children":217},{"className":216},[],[218],{"type":55,"value":219},"lg",{"type":55,"value":221}," or ",{"type":46,"tag":77,"props":223,"children":225},{"className":224},[],[226],{"type":55,"value":227},"xl",{"type":55,"value":229},") the ",{"type":46,"tag":77,"props":231,"children":233},{"className":232},[],[234],{"type":55,"value":181},{"type":55,"value":236}," attribute:",{"type":46,"tag":113,"props":238,"children":240},{"className":186,"code":239,"language":188,"meta":40,"style":118},"\u003CNButton n=\"red xl\" />\n",[241],{"type":46,"tag":77,"props":242,"children":243},{"__ignoreMap":40},[244],{"type":55,"value":239},{"type":46,"tag":51,"props":246,"children":247},{},[248],{"type":55,"value":249},"You can apply the same specifiers to any other component, for example:",{"type":46,"tag":113,"props":251,"children":253},{"className":186,"code":252,"language":188,"meta":40,"style":118},"\u003CNCheckbox n=\"red xl\" />\n",[254],{"type":46,"tag":77,"props":255,"children":256},{"__ignoreMap":40},[257],{"type":55,"value":252},{"type":46,"tag":51,"props":259,"children":260},{},[261],{"type":55,"value":262},"Apply it to parent components could make a local theme scope",{"type":46,"tag":113,"props":264,"children":266},{"className":186,"code":265,"language":188,"meta":40,"style":118},"\u003CNCard n=\"green-500\">\n  \u003C!-- both of them are themed green -->\n  \u003CNCheckbox>i accept the terms & conditions\u003C/NCheckbox>\n  \u003CNButton>Submit\u003C/NButton>\n\u003C/NCard>\n",[267],{"type":46,"tag":77,"props":268,"children":269},{"__ignoreMap":40},[270],{"type":55,"value":265},{"type":46,"tag":51,"props":272,"children":273},{},[274,276,283],{"type":55,"value":275},"Please check our ",{"type":46,"tag":58,"props":277,"children":280},{"href":278,"rel":279},"https://ui-kit.devtools.nuxtjs.org/",[74],[281],{"type":55,"value":282},"Online Demo",{"type":55,"value":284}," for more components usages.",{"type":46,"tag":86,"props":286,"children":288},{"id":287},"components",[289],{"type":55,"value":290},"Components",{"type":46,"tag":51,"props":292,"children":293},{},[294,296,303],{"type":55,"value":295},"Check ",{"type":46,"tag":58,"props":297,"children":300},{"href":298,"rel":299},"https://github.com/nuxt/devtools/blob/main/packages/devtools-ui-kit/src/components",[74],[301],{"type":55,"value":302},"all components",{"type":55,"value":84},{"type":46,"tag":86,"props":305,"children":307},{"id":306},"theming",[308],{"type":55,"value":309},"Theming",{"type":46,"tag":51,"props":311,"children":312},{},[313,315,321],{"type":55,"value":314},"Powered by ",{"type":46,"tag":58,"props":316,"children":319},{"href":317,"rel":318},"https://github.com/antfu/unocss",[74],[320],{"type":55,"value":159},{"type":55,"value":322},", you can use Tailwind/Windi CSS utilities to quickly customize the look and feel of components.",{"type":46,"tag":51,"props":324,"children":325},{},[326],{"type":55,"value":327},"It's also possible to override the default theme globally, for example:",{"type":46,"tag":113,"props":329,"children":331},{"className":126,"code":330,"language":128,"meta":40,"style":118},"// nuxt.config.js\nexport default defineNuxtConfig({\n  modules: [\n    '@nuxt/devtools-ui-kit'\n  ],\n  unocss: {\n    shortcuts: {\n      'n-button-base': 'border n-border-base rounded shadow-sm op80 !outline-none',\n      'n-button-hover': 'op100 !border-context text-context',\n      'n-button-active': 'n-active-base bg-context/5',\n    }\n  }\n})\n",[332],{"type":46,"tag":77,"props":333,"children":334},{"__ignoreMap":40},[335],{"type":55,"value":330},{"type":46,"tag":51,"props":337,"children":338},{},[339,341,348],{"type":55,"value":340},"You can find all the default values and available entries in ",{"type":46,"tag":58,"props":342,"children":345},{"href":343,"rel":344},"https://github.com/nuxt/devtools/blob/main/packages/devtools-ui-kit/src/unocss.ts",[74],[346],{"type":55,"value":347},"src/unocss.ts",{"type":55,"value":84},{"type":46,"tag":350,"props":351,"children":352},"style",{},[353],{"type":55,"value":40},{"title":40,"searchDepth":355,"depth":355,"links":356},2,[357,361,362,363],{"id":88,"depth":355,"text":91,"children":358},[359],{"id":108,"depth":360,"text":111},3,{"id":136,"depth":355,"text":139},{"id":287,"depth":355,"text":290},{"id":306,"depth":355,"text":309},"markdown","content:2.module:2.ui-kit.md","content","2.module/2.ui-kit.md","2.module/2.ui-kit",[370,908],{"_path":26,"_dir":38,"_draft":39,"_partial":39,"_locale":40,"title":25,"description":371,"body":372,"_type":364,"_id":905,"_source":366,"_file":906,"_stem":907,"_extension":212},"Utility kit for easier DevTools integrations.",{"type":43,"children":373,"toc":889},[374,386,394,402,423,432,442,454,462,467,527,535,545,558,568,581,589,597,607,612,620,632,642,647,652,660,681,690,711,721,746,756,761,769,779,791,799,809,821,831,849,857,867,877,885],{"type":46,"tag":51,"props":375,"children":376},{},[377,379,385],{"type":55,"value":378},"Since v0.3.0, we are now providing a utility kit for easier DevTools integrations, similar to ",{"type":46,"tag":77,"props":380,"children":382},{"className":381},[],[383],{"type":55,"value":384},"@nuxt/kit",{"type":55,"value":84},{"type":46,"tag":113,"props":387,"children":389},{"className":115,"code":388,"language":117,"meta":40,"style":118},"npm i @nuxt/devtools-kit\n",[390],{"type":46,"tag":77,"props":391,"children":392},{"__ignoreMap":40},[393],{"type":55,"value":388},{"type":46,"tag":113,"props":395,"children":397},{"className":126,"code":396,"language":128,"meta":40,"style":118},"import { addCustomTab } from '@nuxt/devtools-kit'\n",[398],{"type":46,"tag":77,"props":399,"children":400},{"__ignoreMap":40},[401],{"type":55,"value":396},{"type":46,"tag":51,"props":403,"children":404},{},[405,407,413,415,421],{"type":55,"value":406},"We recommend module authors to install ",{"type":46,"tag":77,"props":408,"children":410},{"className":409},[],[411],{"type":55,"value":412},"@nuxt/devtools-kit",{"type":55,"value":414}," as a dependency and ",{"type":46,"tag":77,"props":416,"children":418},{"className":417},[],[419],{"type":55,"value":420},"@nuxt/devtools",{"type":55,"value":422}," as a dev dependency.",{"type":46,"tag":86,"props":424,"children":426},{"id":425},"nuxtdevtools-kit",[427],{"type":46,"tag":77,"props":428,"children":430},{"className":429},[],[431],{"type":55,"value":412},{"type":46,"tag":106,"props":433,"children":435},{"id":434},"addcustomtab",[436],{"type":46,"tag":77,"props":437,"children":439},{"className":438},[],[440],{"type":55,"value":441},"addCustomTab()",{"type":46,"tag":51,"props":443,"children":444},{},[445,447,453],{"type":55,"value":446},"A shorthand for calling the hook ",{"type":46,"tag":77,"props":448,"children":450},{"className":449},[],[451],{"type":55,"value":452},"devtools:customTabs",{"type":55,"value":84},{"type":46,"tag":113,"props":455,"children":457},{"className":126,"code":456,"language":128,"meta":40,"style":118},"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",[458],{"type":46,"tag":77,"props":459,"children":460},{"__ignoreMap":40},[461],{"type":55,"value":456},{"type":46,"tag":51,"props":463,"children":464},{},[465],{"type":55,"value":466},"The iframe view supports the following options:",{"type":46,"tag":468,"props":469,"children":470},"ul",{},[471,483,502],{"type":46,"tag":472,"props":473,"children":474},"li",{},[475,481],{"type":46,"tag":77,"props":476,"children":478},{"className":477},[],[479],{"type":55,"value":480},"src",{"type":55,"value":482},": URL of the iframe",{"type":46,"tag":472,"props":484,"children":485},{},[486,492,494,500],{"type":46,"tag":77,"props":487,"children":489},{"className":488},[],[490],{"type":55,"value":491},"persistent",{"type":55,"value":493},": Whether to persist the iframe instance when switching tabs (default: ",{"type":46,"tag":77,"props":495,"children":497},{"className":496},[],[498],{"type":55,"value":499},"true",{"type":55,"value":501},")",{"type":46,"tag":472,"props":503,"children":504},{},[505,511,513,519,520,526],{"type":46,"tag":77,"props":506,"children":508},{"className":507},[],[509],{"type":55,"value":510},"permissions",{"type":55,"value":512},": Additional permissions to allow in the iframe (merged with default ",{"type":46,"tag":77,"props":514,"children":516},{"className":515},[],[517],{"type":55,"value":518},"clipboard-write",{"type":55,"value":161},{"type":46,"tag":77,"props":521,"children":523},{"className":522},[],[524],{"type":55,"value":525},"clipboard-read",{"type":55,"value":501},{"type":46,"tag":113,"props":528,"children":530},{"className":126,"code":529,"language":128,"meta":40,"style":118},"const view: ModuleIframeView = {\n  type: 'iframe',\n  src: '/url-to-your-module-view',\n  persistent: true,\n  permissions: ['camera', 'microphone'],\n}\n",[531],{"type":46,"tag":77,"props":532,"children":533},{"__ignoreMap":40},[534],{"type":55,"value":529},{"type":46,"tag":106,"props":536,"children":538},{"id":537},"refreshcustomtabs",[539],{"type":46,"tag":77,"props":540,"children":542},{"className":541},[],[543],{"type":55,"value":544},"refreshCustomTabs()",{"type":46,"tag":51,"props":546,"children":547},{},[548,550,556],{"type":55,"value":549},"A shorthand for call hook ",{"type":46,"tag":77,"props":551,"children":553},{"className":552},[],[554],{"type":55,"value":555},"devtools:customTabs:refresh",{"type":55,"value":557},". It will refresh all custom tabs.",{"type":46,"tag":106,"props":559,"children":561},{"id":560},"startsubprocess",[562],{"type":46,"tag":77,"props":563,"children":565},{"className":564},[],[566],{"type":55,"value":567},"startSubprocess()",{"type":46,"tag":51,"props":569,"children":570},{},[571,573,579],{"type":55,"value":572},"Start a sub process using ",{"type":46,"tag":77,"props":574,"children":576},{"className":575},[],[577],{"type":55,"value":578},"execa",{"type":55,"value":580}," and create a terminal tab in DevTools.",{"type":46,"tag":113,"props":582,"children":584},{"className":126,"code":583,"language":128,"meta":40,"style":118},"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",[585],{"type":46,"tag":77,"props":586,"children":587},{"__ignoreMap":40},[588],{"type":55,"value":583},{"type":46,"tag":113,"props":590,"children":592},{"className":126,"code":591,"language":128,"meta":40,"style":118},"subprocess.restart()\nsubprocess.terminate()\n",[593],{"type":46,"tag":77,"props":594,"children":595},{"__ignoreMap":40},[596],{"type":55,"value":591},{"type":46,"tag":106,"props":598,"children":600},{"id":599},"extendserverrpc",[601],{"type":46,"tag":77,"props":602,"children":604},{"className":603},[],[605],{"type":55,"value":606},"extendServerRpc()",{"type":46,"tag":51,"props":608,"children":609},{},[610],{"type":55,"value":611},"Extend the server RPC with your own methods.",{"type":46,"tag":113,"props":613,"children":615},{"className":126,"code":614,"language":128,"meta":40,"style":118},"import { extendServerRpc } from '@nuxt/devtools-kit'\n\nconst rpc = extendServerRpc('my-module', {\n  async myMethod() {\n    return 'hello'\n  },\n})\n",[616],{"type":46,"tag":77,"props":617,"children":618},{"__ignoreMap":40},[619],{"type":55,"value":614},{"type":46,"tag":51,"props":621,"children":622},{},[623,625,631],{"type":55,"value":624},"Learn more about ",{"type":46,"tag":58,"props":626,"children":628},{"href":627},"/module/guide#custom-rpc-functions",[629],{"type":55,"value":630},"Custom RPC functions",{"type":55,"value":84},{"type":46,"tag":86,"props":633,"children":635},{"id":634},"nuxtdevtools-kitiframe-client",[636],{"type":46,"tag":77,"props":637,"children":639},{"className":638},[],[640],{"type":55,"value":641},"@nuxt/devtools-kit/iframe-client",{"type":46,"tag":51,"props":643,"children":644},{},[645],{"type":55,"value":646},"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":51,"props":648,"children":649},{},[650],{"type":55,"value":651},"To get the infomation from the devtools and the client app, you can do this in your client app:",{"type":46,"tag":113,"props":653,"children":655},{"className":126,"code":654,"language":128,"meta":40,"style":118},"import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'\n\nexport const devtoolsClient = useDevtoolsClient()\n",[656],{"type":46,"tag":77,"props":657,"children":658},{"__ignoreMap":40},[659],{"type":55,"value":654},{"type":46,"tag":51,"props":661,"children":662},{},[663,665,671,673,679],{"type":55,"value":664},"When the iframe been served with the same origin (CORS limitation), devtools will automatically inject ",{"type":46,"tag":77,"props":666,"children":668},{"className":667},[],[669],{"type":55,"value":670},"__NUXT_DEVTOOLS__",{"type":55,"value":672}," to the iframe's window object. You can access it as a ref using ",{"type":46,"tag":77,"props":674,"children":676},{"className":675},[],[677],{"type":55,"value":678},"useDevtoolsClient()",{"type":55,"value":680}," utility.",{"type":46,"tag":106,"props":682,"children":684},{"id":683},"usedevtoolsclient",[685],{"type":46,"tag":77,"props":686,"children":688},{"className":687},[],[689],{"type":55,"value":678},{"type":46,"tag":51,"props":691,"children":692},{},[693,695,701,703,709],{"type":55,"value":694},"It will return a ref of ",{"type":46,"tag":77,"props":696,"children":698},{"className":697},[],[699],{"type":55,"value":700},"NuxtDevtoolsIframeClient",{"type":55,"value":702}," object that are intially ",{"type":46,"tag":77,"props":704,"children":706},{"className":705},[],[707],{"type":55,"value":708},"null",{"type":55,"value":710}," and will be updated when the connection is ready.",{"type":46,"tag":51,"props":712,"children":713},{},[714,719],{"type":46,"tag":77,"props":715,"children":717},{"className":716},[],[718],{"type":55,"value":700},{"type":55,"value":720}," contains two properties:",{"type":46,"tag":468,"props":722,"children":723},{},[724,735],{"type":46,"tag":472,"props":725,"children":726},{},[727,733],{"type":46,"tag":77,"props":728,"children":730},{"className":729},[],[731],{"type":55,"value":732},"host",{"type":55,"value":734},": APIs to communicate with the main app in browser",{"type":46,"tag":472,"props":736,"children":737},{},[738,744],{"type":46,"tag":77,"props":739,"children":741},{"className":740},[],[742],{"type":55,"value":743},"devtools",{"type":55,"value":745},": APIs to communicate with the devtools",{"type":46,"tag":51,"props":747,"children":748},{},[749,754],{"type":46,"tag":77,"props":750,"children":752},{"className":751},[],[753],{"type":55,"value":732},{"type":55,"value":755}," can be undefined when devtools are accessed standalone or from a different origin.",{"type":46,"tag":51,"props":757,"children":758},{},[759],{"type":55,"value":760},"For example, you can get the router instance from the client app:",{"type":46,"tag":113,"props":762,"children":764},{"className":126,"code":763,"language":128,"meta":40,"style":118},"const router = computed(() => devtoolsClient.value?.host?.nuxt.vueApp.config.globalProperties?.$router)\n",[765],{"type":46,"tag":77,"props":766,"children":767},{"__ignoreMap":40},[768],{"type":55,"value":763},{"type":46,"tag":106,"props":770,"children":772},{"id":771},"ondevtoolsclientconnected",[773],{"type":46,"tag":77,"props":774,"children":776},{"className":775},[],[777],{"type":55,"value":778},"onDevtoolsClientConnected()",{"type":46,"tag":51,"props":780,"children":781},{},[782,784,789],{"type":55,"value":783},"Similiar to ",{"type":46,"tag":77,"props":785,"children":787},{"className":786},[],[788],{"type":55,"value":678},{"type":55,"value":790}," but as a callback style:",{"type":46,"tag":113,"props":792,"children":794},{"className":126,"code":793,"language":128,"meta":40,"style":118},"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",[795],{"type":46,"tag":77,"props":796,"children":797},{"__ignoreMap":40},[798],{"type":55,"value":793},{"type":46,"tag":86,"props":800,"children":802},{"id":801},"nuxtdevtools-kithost-client",[803],{"type":46,"tag":77,"props":804,"children":806},{"className":805},[],[807],{"type":55,"value":808},"@nuxt/devtools-kit/host-client",{"type":46,"tag":51,"props":810,"children":811},{},[812,814,819],{"type":55,"value":813},"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":77,"props":815,"children":817},{"className":816},[],[818],{"type":55,"value":808},{"type":55,"value":820}," to do that.",{"type":46,"tag":106,"props":822,"children":824},{"id":823},"usedevtoolshostclient",[825],{"type":46,"tag":77,"props":826,"children":828},{"className":827},[],[829],{"type":55,"value":830},"useDevtoolsHostClient()",{"type":46,"tag":51,"props":832,"children":833},{},[834,835,841,842,847],{"type":55,"value":694},{"type":46,"tag":77,"props":836,"children":838},{"className":837},[],[839],{"type":55,"value":840},"NuxtDevtoolsHostClient",{"type":55,"value":702},{"type":46,"tag":77,"props":843,"children":845},{"className":844},[],[846],{"type":55,"value":708},{"type":55,"value":848}," and will be updated when the host is initialized by NuxtDevtools.",{"type":46,"tag":113,"props":850,"children":852},{"className":126,"code":851,"language":128,"meta":40,"style":118},"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",[853],{"type":46,"tag":77,"props":854,"children":855},{"__ignoreMap":40},[856],{"type":55,"value":851},{"type":46,"tag":106,"props":858,"children":860},{"id":859},"ondevtoolshostclientconnected",[861],{"type":46,"tag":77,"props":862,"children":864},{"className":863},[],[865],{"type":55,"value":866},"onDevtoolsHostClientConnected()",{"type":46,"tag":51,"props":868,"children":869},{},[870,871,876],{"type":55,"value":783},{"type":46,"tag":77,"props":872,"children":874},{"className":873},[],[875],{"type":55,"value":830},{"type":55,"value":790},{"type":46,"tag":113,"props":878,"children":880},{"className":126,"code":879,"language":128,"meta":40,"style":118},"import { onDevtoolsHostClientConnected } from '@nuxt/devtools-kit/host-client'\n\nonDevtoolsHostClientConnected(async (host) => {\n\n})\n",[881],{"type":46,"tag":77,"props":882,"children":883},{"__ignoreMap":40},[884],{"type":55,"value":879},{"type":46,"tag":350,"props":886,"children":887},{},[888],{"type":55,"value":40},{"title":40,"searchDepth":355,"depth":355,"links":890},[891,897,901],{"id":425,"depth":355,"text":412,"children":892},[893,894,895,896],{"id":434,"depth":360,"text":441},{"id":537,"depth":360,"text":544},{"id":560,"depth":360,"text":567},{"id":599,"depth":360,"text":606},{"id":634,"depth":355,"text":641,"children":898},[899,900],{"id":683,"depth":360,"text":678},{"id":771,"depth":360,"text":778},{"id":801,"depth":355,"text":808,"children":902},[903,904],{"id":823,"depth":360,"text":830},{"id":859,"depth":360,"text":866},"content:2.module:1.utils-kit.md","2.module/1.utils-kit.md","2.module/1.utils-kit",{"_path":36,"_dir":909,"_draft":39,"_partial":39,"_locale":40,"title":35,"description":910,"body":911,"_type":364,"_id":1159,"_source":366,"_file":1160,"_stem":1161,"_extension":212},"development","Learn how to contribute to the Nuxt DevTools.",{"type":43,"children":912,"toc":1151},[913,918,924,937,942,952,976,982,987,1010,1015,1036,1056,1061,1080,1086,1099,1111,1132,1142,1147],{"type":46,"tag":51,"props":914,"children":915},{},[916],{"type":55,"value":917},"Hi! We're really excited that you're interested in contributing to Nuxt DevTools! Before submitting your contribution, please read through the following guide.",{"type":46,"tag":86,"props":919,"children":921},{"id":920},"monorepo",[922],{"type":55,"value":923},"Monorepo",{"type":46,"tag":51,"props":925,"children":926},{},[927,929,936],{"type":55,"value":928},"The Nuxt DevTools repo is a monorepo using pnpm workspaces. The package manager used to install and link dependencies must be ",{"type":46,"tag":58,"props":930,"children":933},{"href":931,"rel":932},"https://pnpm.io/",[74],[934],{"type":55,"value":935},"pnpm",{"type":55,"value":84},{"type":46,"tag":51,"props":938,"children":939},{},[940],{"type":55,"value":941},"After cloning the repo, run in the root folder.",{"type":46,"tag":113,"props":943,"children":947},{"className":944,"code":945,"language":946,"meta":40,"style":118},"language-sh","pnpm i\npnpm run build\n","sh",[948],{"type":46,"tag":77,"props":949,"children":950},{"__ignoreMap":40},[951],{"type":55,"value":945},{"type":46,"tag":47,"props":953,"children":954},{},[955],{"type":46,"tag":51,"props":956,"children":957},{},[958,960,967,969,975],{"type":55,"value":959},"Nuxt DevTools uses pnpm v8. If you are working on multiple projects with different versions of pnpm, it's recommended to enable ",{"type":46,"tag":58,"props":961,"children":964},{"href":962,"rel":963},"https://github.com/nodejs/corepack",[74],[965],{"type":55,"value":966},"Corepack",{"type":55,"value":968}," by running ",{"type":46,"tag":77,"props":970,"children":972},{"className":971},[],[973],{"type":55,"value":974},"corepack enable",{"type":55,"value":84},{"type":46,"tag":86,"props":977,"children":979},{"id":978},"packages",[980],{"type":55,"value":981},"Packages",{"type":46,"tag":51,"props":983,"children":984},{},[985],{"type":55,"value":986},"This repo contains the following packages:",{"type":46,"tag":468,"props":988,"children":989},{},[990,1000],{"type":46,"tag":472,"props":991,"children":992},{},[993,998],{"type":46,"tag":77,"props":994,"children":996},{"className":995},[],[997],{"type":55,"value":420},{"type":55,"value":999},": The Nuxt DevTools module",{"type":46,"tag":472,"props":1001,"children":1002},{},[1003,1008],{"type":46,"tag":77,"props":1004,"children":1006},{"className":1005},[],[1007],{"type":55,"value":150},{"type":55,"value":1009},": The UI Kit used by Nuxt DevTools and also for module authors to build UI for DevTools interation",{"type":46,"tag":106,"props":1011,"children":1012},{"id":743},[1013],{"type":55,"value":1014},"DevTools",{"type":46,"tag":51,"props":1016,"children":1017},{},[1018,1020,1026,1028,1034],{"type":55,"value":1019},"Most of the scripts are forward to the root ",{"type":46,"tag":77,"props":1021,"children":1023},{"className":1022},[],[1024],{"type":55,"value":1025},"package.json",{"type":55,"value":1027},". You can run ",{"type":46,"tag":77,"props":1029,"children":1031},{"className":1030},[],[1032],{"type":55,"value":1033},"pnpm dev",{"type":55,"value":1035}," in the root folder to start the development server (Nuxt DevTools on top of it's own client UI).",{"type":46,"tag":51,"props":1037,"children":1038},{},[1039,1041,1047,1049,1054],{"type":55,"value":1040},"Or you can ",{"type":46,"tag":77,"props":1042,"children":1044},{"className":1043},[],[1045],{"type":55,"value":1046},"cd packages/devtools",{"type":55,"value":1048}," and run ",{"type":46,"tag":77,"props":1050,"children":1052},{"className":1051},[],[1053],{"type":55,"value":1033},{"type":55,"value":1055}," to start the development server.",{"type":46,"tag":106,"props":1057,"children":1059},{"id":1058},"ui-kit",[1060],{"type":55,"value":28},{"type":46,"tag":51,"props":1062,"children":1063},{},[1064,1066,1072,1073,1078],{"type":55,"value":1065},"Normally when you are developing the Nuxt DevTools, the components in the UI Kit already get the HMR capabilities. But if you want to develop the UI Kit itself, you can run ",{"type":46,"tag":77,"props":1067,"children":1069},{"className":1068},[],[1070],{"type":55,"value":1071},"cd packages/devtools-ui-kit",{"type":55,"value":1048},{"type":46,"tag":77,"props":1074,"children":1076},{"className":1075},[],[1077],{"type":55,"value":1033},{"type":55,"value":1079}," to start the playground for the UI Kit.",{"type":46,"tag":86,"props":1081,"children":1083},{"id":1082},"trying-local-changes",[1084],{"type":55,"value":1085},"Trying Local Changes",{"type":46,"tag":51,"props":1087,"children":1088},{},[1089,1091,1097],{"type":55,"value":1090},"If you want to try your local changes in other Nuxt projects, you can use the ",{"type":46,"tag":77,"props":1092,"children":1094},{"className":1093},[],[1095],{"type":55,"value":1096},"local.ts",{"type":55,"value":1098}," module under the root folder.",{"type":46,"tag":51,"props":1100,"children":1101},{},[1102,1104,1109],{"type":55,"value":1103},"Change ",{"type":46,"tag":77,"props":1105,"children":1107},{"className":1106},[],[1108],{"type":55,"value":420},{"type":55,"value":1110}," to the absolute path of this module in any of your Nuxt projects,\nallows you to try Nuxt DevTools locally directly from the source code. HMR is supported\nfor the front-end client.",{"type":46,"tag":51,"props":1112,"children":1113},{},[1114,1116,1122,1124,1130],{"type":55,"value":1115},"For example, if you clone this repo to ",{"type":46,"tag":77,"props":1117,"children":1119},{"className":1118},[],[1120],{"type":55,"value":1121},"/users/me/nuxt-devtools",{"type":55,"value":1123},", update your ",{"type":46,"tag":77,"props":1125,"children":1127},{"className":1126},[],[1128],{"type":55,"value":1129},"nuxt.config.ts",{"type":55,"value":1131},":",{"type":46,"tag":113,"props":1133,"children":1137},{"className":1134,"code":1135,"filename":1129,"language":1136,"meta":40,"style":118},"language-diff","export default defineNuxtConfig({\n  modules: [\n-   '@nuxt/devtools',\n+   '/users/me/nuxt-devtools/local',\n  ]\n})\n","diff",[1138],{"type":46,"tag":77,"props":1139,"children":1140},{"__ignoreMap":40},[1141],{"type":55,"value":1135},{"type":46,"tag":51,"props":1143,"children":1144},{},[1145],{"type":55,"value":1146},"On the module code, the source TypeScript file are directly used, so you don't need to build everytime. However, due to Node.js module caching, you need to restart your app to see the changes on the module side.",{"type":46,"tag":350,"props":1148,"children":1149},{},[1150],{"type":55,"value":40},{"title":40,"searchDepth":355,"depth":355,"links":1152},[1153,1154,1158],{"id":920,"depth":355,"text":923},{"id":978,"depth":355,"text":981,"children":1155},[1156,1157],{"id":743,"depth":360,"text":1014},{"id":1058,"depth":360,"text":28},{"id":1082,"depth":355,"text":1085},"content:3.development:0.contributing.md","3.development/0.contributing.md","3.development/0.contributing",1787397683209]