[{"data":1,"prerenderedAt":2866},["Reactive",2],{"navigation":3,"docs-/module/ui-kit":37,"docs-/module/ui-kit-surround":967},[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":963,"_id":964,"_source":965,"_file":966,"_extension":362},"module",false,"","UI Kit is for module authors to build a custom view.",{"type":43,"children":44,"toc":955},"root",[45,65,84,91,104,111,144,247,253,282,294,346,384,427,432,475,480,616,630,636,649,655,668,673,936,949],{"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,82],{"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":79},"code",{"className":40},[80],{"type":55,"value":81},"packages/devtools-ui-kit",{"type":55,"value":83},".",{"type":46,"tag":85,"props":86,"children":88},"h2",{"id":87},"installation",[89],{"type":55,"value":90},"Installation",{"type":46,"tag":51,"props":92,"children":93},{},[94,96,102],{"type":55,"value":95},"We recommend to use the ",{"type":46,"tag":58,"props":97,"children":99},{"href":98},"/module/guide#starter-template",[100],{"type":55,"value":101},"Starter Template",{"type":55,"value":103}," for authoring a DevTools integration for your module, which has the set up built in and ready to use.",{"type":46,"tag":105,"props":106,"children":108},"h3",{"id":107},"manual-install",[109],{"type":55,"value":110},"Manual Install",{"type":46,"tag":112,"props":113,"children":117},"pre",{"className":114,"code":115,"language":116,"meta":40,"style":40},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm i @nuxt/devtools-ui-kit\n","bash",[118],{"type":46,"tag":77,"props":119,"children":120},{"__ignoreMap":40},[121],{"type":46,"tag":122,"props":123,"children":126},"span",{"class":124,"line":125},"line",1,[127,133,139],{"type":46,"tag":122,"props":128,"children":130},{"style":129},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[131],{"type":55,"value":132},"npm",{"type":46,"tag":122,"props":134,"children":136},{"style":135},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[137],{"type":55,"value":138}," i",{"type":46,"tag":122,"props":140,"children":141},{"style":135},[142],{"type":55,"value":143}," @nuxt/devtools-ui-kit\n",{"type":46,"tag":112,"props":145,"children":149},{"className":146,"code":147,"language":148,"meta":40,"style":40},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: [\n    '@nuxt/devtools-ui-kit'\n  ]\n})\n","ts",[150],{"type":46,"tag":77,"props":151,"children":152},{"__ignoreMap":40},[153,185,205,224,233],{"type":46,"tag":122,"props":154,"children":155},{"class":124,"line":125},[156,162,167,173,179],{"type":46,"tag":122,"props":157,"children":159},{"style":158},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF;--shiki-light-font-style:italic;--shiki-default-font-style:italic;--shiki-dark-font-style:italic",[160],{"type":55,"value":161},"export",{"type":46,"tag":122,"props":163,"children":164},{"style":158},[165],{"type":55,"value":166}," default",{"type":46,"tag":122,"props":168,"children":170},{"style":169},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[171],{"type":55,"value":172}," defineNuxtConfig",{"type":46,"tag":122,"props":174,"children":176},{"style":175},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[177],{"type":55,"value":178},"(",{"type":46,"tag":122,"props":180,"children":182},{"style":181},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[183],{"type":55,"value":184},"{\n",{"type":46,"tag":122,"props":186,"children":188},{"class":124,"line":187},2,[189,195,200],{"type":46,"tag":122,"props":190,"children":192},{"style":191},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[193],{"type":55,"value":194},"  modules",{"type":46,"tag":122,"props":196,"children":197},{"style":181},[198],{"type":55,"value":199},":",{"type":46,"tag":122,"props":201,"children":202},{"style":175},[203],{"type":55,"value":204}," [\n",{"type":46,"tag":122,"props":206,"children":208},{"class":124,"line":207},3,[209,214,219],{"type":46,"tag":122,"props":210,"children":211},{"style":181},[212],{"type":55,"value":213},"    '",{"type":46,"tag":122,"props":215,"children":216},{"style":135},[217],{"type":55,"value":218},"@nuxt/devtools-ui-kit",{"type":46,"tag":122,"props":220,"children":221},{"style":181},[222],{"type":55,"value":223},"'\n",{"type":46,"tag":122,"props":225,"children":227},{"class":124,"line":226},4,[228],{"type":46,"tag":122,"props":229,"children":230},{"style":175},[231],{"type":55,"value":232},"  ]\n",{"type":46,"tag":122,"props":234,"children":236},{"class":124,"line":235},5,[237,242],{"type":46,"tag":122,"props":238,"children":239},{"style":181},[240],{"type":55,"value":241},"}",{"type":46,"tag":122,"props":243,"children":244},{"style":175},[245],{"type":55,"value":246},")\n",{"type":46,"tag":85,"props":248,"children":250},{"id":249},"usage",[251],{"type":55,"value":252},"Usage",{"type":46,"tag":51,"props":254,"children":255},{},[256,258,262,264,271,273,280],{"type":55,"value":257},"Under the hood, ",{"type":46,"tag":77,"props":259,"children":260},{"className":40},[261],{"type":55,"value":218},{"type":55,"value":263}," is an unbundled component library powered by ",{"type":46,"tag":58,"props":265,"children":268},{"href":266,"rel":267},"https://github.com/unocss/unocss",[74],[269],{"type":55,"value":270},"UnoCSS",{"type":55,"value":272}," and ",{"type":46,"tag":58,"props":274,"children":277},{"href":275,"rel":276},"https://vueuse.org/",[74],[278],{"type":55,"value":279},"VueUse",{"type":55,"value":281},". Components are auto imported.",{"type":46,"tag":51,"props":283,"children":284},{},[285,287,292],{"type":55,"value":286},"In this library, we introduced the ",{"type":46,"tag":77,"props":288,"children":289},{"className":40},[290],{"type":55,"value":291},"n",{"type":55,"value":293}," attribute for every component to customize the styles and variations. For example, to make a red button:",{"type":46,"tag":112,"props":295,"children":299},{"className":296,"code":297,"language":298,"meta":40,"style":40},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNButton n=\"red\" />\n","html",[300],{"type":46,"tag":77,"props":301,"children":302},{"__ignoreMap":40},[303],{"type":46,"tag":122,"props":304,"children":305},{"class":124,"line":125},[306,311,316,322,327,332,337,341],{"type":46,"tag":122,"props":307,"children":308},{"style":181},[309],{"type":55,"value":310},"\u003C",{"type":46,"tag":122,"props":312,"children":313},{"style":191},[314],{"type":55,"value":315},"NButton",{"type":46,"tag":122,"props":317,"children":319},{"style":318},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[320],{"type":55,"value":321}," n",{"type":46,"tag":122,"props":323,"children":324},{"style":181},[325],{"type":55,"value":326},"=",{"type":46,"tag":122,"props":328,"children":329},{"style":181},[330],{"type":55,"value":331},"\"",{"type":46,"tag":122,"props":333,"children":334},{"style":135},[335],{"type":55,"value":336},"red",{"type":46,"tag":122,"props":338,"children":339},{"style":181},[340],{"type":55,"value":331},{"type":46,"tag":122,"props":342,"children":343},{"style":181},[344],{"type":55,"value":345}," />\n",{"type":46,"tag":51,"props":347,"children":348},{},[349,351,356,358,363,364,369,371,376,378,382],{"type":55,"value":350},"to make it larger, add the size specifier (",{"type":46,"tag":77,"props":352,"children":353},{"className":40},[354],{"type":55,"value":355},"sm",{"type":55,"value":357},", ",{"type":46,"tag":77,"props":359,"children":360},{"className":40},[361],{"type":55,"value":362},"md",{"type":55,"value":357},{"type":46,"tag":77,"props":365,"children":366},{"className":40},[367],{"type":55,"value":368},"lg",{"type":55,"value":370}," or ",{"type":46,"tag":77,"props":372,"children":373},{"className":40},[374],{"type":55,"value":375},"xl",{"type":55,"value":377},") the ",{"type":46,"tag":77,"props":379,"children":380},{"className":40},[381],{"type":55,"value":291},{"type":55,"value":383}," attribute:",{"type":46,"tag":112,"props":385,"children":387},{"className":296,"code":386,"language":298,"meta":40,"style":40},"\u003CNButton n=\"red xl\" />\n",[388],{"type":46,"tag":77,"props":389,"children":390},{"__ignoreMap":40},[391],{"type":46,"tag":122,"props":392,"children":393},{"class":124,"line":125},[394,398,402,406,410,414,419,423],{"type":46,"tag":122,"props":395,"children":396},{"style":181},[397],{"type":55,"value":310},{"type":46,"tag":122,"props":399,"children":400},{"style":191},[401],{"type":55,"value":315},{"type":46,"tag":122,"props":403,"children":404},{"style":318},[405],{"type":55,"value":321},{"type":46,"tag":122,"props":407,"children":408},{"style":181},[409],{"type":55,"value":326},{"type":46,"tag":122,"props":411,"children":412},{"style":181},[413],{"type":55,"value":331},{"type":46,"tag":122,"props":415,"children":416},{"style":135},[417],{"type":55,"value":418},"red xl",{"type":46,"tag":122,"props":420,"children":421},{"style":181},[422],{"type":55,"value":331},{"type":46,"tag":122,"props":424,"children":425},{"style":181},[426],{"type":55,"value":345},{"type":46,"tag":51,"props":428,"children":429},{},[430],{"type":55,"value":431},"You can apply the same specifiers to any other component, for example:",{"type":46,"tag":112,"props":433,"children":435},{"className":296,"code":434,"language":298,"meta":40,"style":40},"\u003CNCheckbox n=\"red xl\" />\n",[436],{"type":46,"tag":77,"props":437,"children":438},{"__ignoreMap":40},[439],{"type":46,"tag":122,"props":440,"children":441},{"class":124,"line":125},[442,446,451,455,459,463,467,471],{"type":46,"tag":122,"props":443,"children":444},{"style":181},[445],{"type":55,"value":310},{"type":46,"tag":122,"props":447,"children":448},{"style":191},[449],{"type":55,"value":450},"NCheckbox",{"type":46,"tag":122,"props":452,"children":453},{"style":318},[454],{"type":55,"value":321},{"type":46,"tag":122,"props":456,"children":457},{"style":181},[458],{"type":55,"value":326},{"type":46,"tag":122,"props":460,"children":461},{"style":181},[462],{"type":55,"value":331},{"type":46,"tag":122,"props":464,"children":465},{"style":135},[466],{"type":55,"value":418},{"type":46,"tag":122,"props":468,"children":469},{"style":181},[470],{"type":55,"value":331},{"type":46,"tag":122,"props":472,"children":473},{"style":181},[474],{"type":55,"value":345},{"type":46,"tag":51,"props":476,"children":477},{},[478],{"type":55,"value":479},"Apply it to parent components could make a local theme scope",{"type":46,"tag":112,"props":481,"children":483},{"className":296,"code":482,"language":298,"meta":40,"style":40},"\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",[484],{"type":46,"tag":77,"props":485,"children":486},{"__ignoreMap":40},[487,525,534,569,601],{"type":46,"tag":122,"props":488,"children":489},{"class":124,"line":125},[490,494,499,503,507,511,516,520],{"type":46,"tag":122,"props":491,"children":492},{"style":181},[493],{"type":55,"value":310},{"type":46,"tag":122,"props":495,"children":496},{"style":191},[497],{"type":55,"value":498},"NCard",{"type":46,"tag":122,"props":500,"children":501},{"style":318},[502],{"type":55,"value":321},{"type":46,"tag":122,"props":504,"children":505},{"style":181},[506],{"type":55,"value":326},{"type":46,"tag":122,"props":508,"children":509},{"style":181},[510],{"type":55,"value":331},{"type":46,"tag":122,"props":512,"children":513},{"style":135},[514],{"type":55,"value":515},"green-500",{"type":46,"tag":122,"props":517,"children":518},{"style":181},[519],{"type":55,"value":331},{"type":46,"tag":122,"props":521,"children":522},{"style":181},[523],{"type":55,"value":524},">\n",{"type":46,"tag":122,"props":526,"children":527},{"class":124,"line":187},[528],{"type":46,"tag":122,"props":529,"children":531},{"style":530},"--shiki-light:#90A4AE;--shiki-default:#546E7A;--shiki-dark:#676E95;--shiki-light-font-style:italic;--shiki-default-font-style:italic;--shiki-dark-font-style:italic",[532],{"type":55,"value":533},"  \u003C!-- both of them are themed green -->\n",{"type":46,"tag":122,"props":535,"children":536},{"class":124,"line":207},[537,542,546,551,556,561,565],{"type":46,"tag":122,"props":538,"children":539},{"style":181},[540],{"type":55,"value":541},"  \u003C",{"type":46,"tag":122,"props":543,"children":544},{"style":191},[545],{"type":55,"value":450},{"type":46,"tag":122,"props":547,"children":548},{"style":181},[549],{"type":55,"value":550},">",{"type":46,"tag":122,"props":552,"children":553},{"style":175},[554],{"type":55,"value":555},"i accept the terms & conditions",{"type":46,"tag":122,"props":557,"children":558},{"style":181},[559],{"type":55,"value":560},"\u003C/",{"type":46,"tag":122,"props":562,"children":563},{"style":191},[564],{"type":55,"value":450},{"type":46,"tag":122,"props":566,"children":567},{"style":181},[568],{"type":55,"value":524},{"type":46,"tag":122,"props":570,"children":571},{"class":124,"line":226},[572,576,580,584,589,593,597],{"type":46,"tag":122,"props":573,"children":574},{"style":181},[575],{"type":55,"value":541},{"type":46,"tag":122,"props":577,"children":578},{"style":191},[579],{"type":55,"value":315},{"type":46,"tag":122,"props":581,"children":582},{"style":181},[583],{"type":55,"value":550},{"type":46,"tag":122,"props":585,"children":586},{"style":175},[587],{"type":55,"value":588},"Submit",{"type":46,"tag":122,"props":590,"children":591},{"style":181},[592],{"type":55,"value":560},{"type":46,"tag":122,"props":594,"children":595},{"style":191},[596],{"type":55,"value":315},{"type":46,"tag":122,"props":598,"children":599},{"style":181},[600],{"type":55,"value":524},{"type":46,"tag":122,"props":602,"children":603},{"class":124,"line":235},[604,608,612],{"type":46,"tag":122,"props":605,"children":606},{"style":181},[607],{"type":55,"value":560},{"type":46,"tag":122,"props":609,"children":610},{"style":191},[611],{"type":55,"value":498},{"type":46,"tag":122,"props":613,"children":614},{"style":181},[615],{"type":55,"value":524},{"type":46,"tag":51,"props":617,"children":618},{},[619,621,628],{"type":55,"value":620},"Please check our ",{"type":46,"tag":58,"props":622,"children":625},{"href":623,"rel":624},"https://ui-kit.devtools.nuxtjs.org/",[74],[626],{"type":55,"value":627},"Online Demo",{"type":55,"value":629}," for more components usages.",{"type":46,"tag":85,"props":631,"children":633},{"id":632},"components",[634],{"type":55,"value":635},"Components",{"type":46,"tag":51,"props":637,"children":638},{},[639,641,648],{"type":55,"value":640},"Check ",{"type":46,"tag":58,"props":642,"children":645},{"href":643,"rel":644},"https://github.com/nuxt/devtools/blob/main/packages/devtools-ui-kit/src/components",[74],[646],{"type":55,"value":647},"all components",{"type":55,"value":83},{"type":46,"tag":85,"props":650,"children":652},{"id":651},"theming",[653],{"type":55,"value":654},"Theming",{"type":46,"tag":51,"props":656,"children":657},{},[658,660,666],{"type":55,"value":659},"Powered by ",{"type":46,"tag":58,"props":661,"children":664},{"href":662,"rel":663},"https://github.com/antfu/unocss",[74],[665],{"type":55,"value":270},{"type":55,"value":667},", you can use Tailwind/Windi CSS utilities to quickly customize the look and feel of components.",{"type":46,"tag":51,"props":669,"children":670},{},[671],{"type":55,"value":672},"It's also possible to override the default theme globally, for example:",{"type":46,"tag":112,"props":674,"children":676},{"className":146,"code":675,"language":148,"meta":40,"style":40},"// 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",[677],{"type":46,"tag":77,"props":678,"children":679},{"__ignoreMap":40},[680,688,711,726,741,754,772,789,830,868,906,915,924],{"type":46,"tag":122,"props":681,"children":682},{"class":124,"line":125},[683],{"type":46,"tag":122,"props":684,"children":685},{"style":530},[686],{"type":55,"value":687},"// nuxt.config.js\n",{"type":46,"tag":122,"props":689,"children":690},{"class":124,"line":187},[691,695,699,703,707],{"type":46,"tag":122,"props":692,"children":693},{"style":158},[694],{"type":55,"value":161},{"type":46,"tag":122,"props":696,"children":697},{"style":158},[698],{"type":55,"value":166},{"type":46,"tag":122,"props":700,"children":701},{"style":169},[702],{"type":55,"value":172},{"type":46,"tag":122,"props":704,"children":705},{"style":175},[706],{"type":55,"value":178},{"type":46,"tag":122,"props":708,"children":709},{"style":181},[710],{"type":55,"value":184},{"type":46,"tag":122,"props":712,"children":713},{"class":124,"line":207},[714,718,722],{"type":46,"tag":122,"props":715,"children":716},{"style":191},[717],{"type":55,"value":194},{"type":46,"tag":122,"props":719,"children":720},{"style":181},[721],{"type":55,"value":199},{"type":46,"tag":122,"props":723,"children":724},{"style":175},[725],{"type":55,"value":204},{"type":46,"tag":122,"props":727,"children":728},{"class":124,"line":226},[729,733,737],{"type":46,"tag":122,"props":730,"children":731},{"style":181},[732],{"type":55,"value":213},{"type":46,"tag":122,"props":734,"children":735},{"style":135},[736],{"type":55,"value":218},{"type":46,"tag":122,"props":738,"children":739},{"style":181},[740],{"type":55,"value":223},{"type":46,"tag":122,"props":742,"children":743},{"class":124,"line":235},[744,749],{"type":46,"tag":122,"props":745,"children":746},{"style":175},[747],{"type":55,"value":748},"  ]",{"type":46,"tag":122,"props":750,"children":751},{"style":181},[752],{"type":55,"value":753},",\n",{"type":46,"tag":122,"props":755,"children":757},{"class":124,"line":756},6,[758,763,767],{"type":46,"tag":122,"props":759,"children":760},{"style":191},[761],{"type":55,"value":762},"  unocss",{"type":46,"tag":122,"props":764,"children":765},{"style":181},[766],{"type":55,"value":199},{"type":46,"tag":122,"props":768,"children":769},{"style":181},[770],{"type":55,"value":771}," {\n",{"type":46,"tag":122,"props":773,"children":775},{"class":124,"line":774},7,[776,781,785],{"type":46,"tag":122,"props":777,"children":778},{"style":191},[779],{"type":55,"value":780},"    shortcuts",{"type":46,"tag":122,"props":782,"children":783},{"style":181},[784],{"type":55,"value":199},{"type":46,"tag":122,"props":786,"children":787},{"style":181},[788],{"type":55,"value":771},{"type":46,"tag":122,"props":790,"children":792},{"class":124,"line":791},8,[793,798,803,808,812,817,822,826],{"type":46,"tag":122,"props":794,"children":795},{"style":181},[796],{"type":55,"value":797},"      '",{"type":46,"tag":122,"props":799,"children":800},{"style":191},[801],{"type":55,"value":802},"n-button-base",{"type":46,"tag":122,"props":804,"children":805},{"style":181},[806],{"type":55,"value":807},"'",{"type":46,"tag":122,"props":809,"children":810},{"style":181},[811],{"type":55,"value":199},{"type":46,"tag":122,"props":813,"children":814},{"style":181},[815],{"type":55,"value":816}," '",{"type":46,"tag":122,"props":818,"children":819},{"style":135},[820],{"type":55,"value":821},"border n-border-base rounded shadow-sm op80 !outline-none",{"type":46,"tag":122,"props":823,"children":824},{"style":181},[825],{"type":55,"value":807},{"type":46,"tag":122,"props":827,"children":828},{"style":181},[829],{"type":55,"value":753},{"type":46,"tag":122,"props":831,"children":833},{"class":124,"line":832},9,[834,838,843,847,851,855,860,864],{"type":46,"tag":122,"props":835,"children":836},{"style":181},[837],{"type":55,"value":797},{"type":46,"tag":122,"props":839,"children":840},{"style":191},[841],{"type":55,"value":842},"n-button-hover",{"type":46,"tag":122,"props":844,"children":845},{"style":181},[846],{"type":55,"value":807},{"type":46,"tag":122,"props":848,"children":849},{"style":181},[850],{"type":55,"value":199},{"type":46,"tag":122,"props":852,"children":853},{"style":181},[854],{"type":55,"value":816},{"type":46,"tag":122,"props":856,"children":857},{"style":135},[858],{"type":55,"value":859},"op100 !border-context text-context",{"type":46,"tag":122,"props":861,"children":862},{"style":181},[863],{"type":55,"value":807},{"type":46,"tag":122,"props":865,"children":866},{"style":181},[867],{"type":55,"value":753},{"type":46,"tag":122,"props":869,"children":871},{"class":124,"line":870},10,[872,876,881,885,889,893,898,902],{"type":46,"tag":122,"props":873,"children":874},{"style":181},[875],{"type":55,"value":797},{"type":46,"tag":122,"props":877,"children":878},{"style":191},[879],{"type":55,"value":880},"n-button-active",{"type":46,"tag":122,"props":882,"children":883},{"style":181},[884],{"type":55,"value":807},{"type":46,"tag":122,"props":886,"children":887},{"style":181},[888],{"type":55,"value":199},{"type":46,"tag":122,"props":890,"children":891},{"style":181},[892],{"type":55,"value":816},{"type":46,"tag":122,"props":894,"children":895},{"style":135},[896],{"type":55,"value":897},"n-active-base bg-context/5",{"type":46,"tag":122,"props":899,"children":900},{"style":181},[901],{"type":55,"value":807},{"type":46,"tag":122,"props":903,"children":904},{"style":181},[905],{"type":55,"value":753},{"type":46,"tag":122,"props":907,"children":909},{"class":124,"line":908},11,[910],{"type":46,"tag":122,"props":911,"children":912},{"style":181},[913],{"type":55,"value":914},"    }\n",{"type":46,"tag":122,"props":916,"children":918},{"class":124,"line":917},12,[919],{"type":46,"tag":122,"props":920,"children":921},{"style":181},[922],{"type":55,"value":923},"  }\n",{"type":46,"tag":122,"props":925,"children":927},{"class":124,"line":926},13,[928,932],{"type":46,"tag":122,"props":929,"children":930},{"style":181},[931],{"type":55,"value":241},{"type":46,"tag":122,"props":933,"children":934},{"style":175},[935],{"type":55,"value":246},{"type":46,"tag":51,"props":937,"children":938},{},[939,941,948],{"type":55,"value":940},"You can find all the default values and available entries in ",{"type":46,"tag":58,"props":942,"children":945},{"href":943,"rel":944},"https://github.com/nuxt/devtools/blob/main/packages/devtools-ui-kit/src/unocss.ts",[74],[946],{"type":55,"value":947},"src/unocss.ts",{"type":55,"value":83},{"type":46,"tag":950,"props":951,"children":952},"style",{},[953],{"type":55,"value":954},"html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":40,"searchDepth":187,"depth":187,"links":956},[957,960,961,962],{"id":87,"depth":187,"text":90,"children":958},[959],{"id":107,"depth":207,"text":110},{"id":249,"depth":187,"text":252},{"id":632,"depth":187,"text":635},{"id":651,"depth":187,"text":654},"markdown","content:2.module:2.ui-kit.md","content","2.module/2.ui-kit.md",[968,2535],{"_path":26,"_dir":38,"_draft":39,"_partial":39,"_locale":40,"title":25,"description":969,"body":970,"_type":963,"_id":2533,"_source":965,"_file":2534,"_extension":362},"Utility kit for easier DevTools integrations.",{"type":43,"children":971,"toc":2521},[972,983,1006,1054,1072,1080,1089,1100,1397,1406,1418,1427,1439,1790,1839,1848,1853,2008,2020,2029,2034,2039,2118,2137,2145,2164,2173,2198,2207,2212,2320,2329,2340,2517],{"type":46,"tag":51,"props":973,"children":974},{},[975,977,982],{"type":55,"value":976},"Since v0.3.0, we are now providing a utility kit for easier DevTools integrations, similar to ",{"type":46,"tag":77,"props":978,"children":979},{"className":40},[980],{"type":55,"value":981},"@nuxt/kit",{"type":55,"value":83},{"type":46,"tag":112,"props":984,"children":986},{"className":114,"code":985,"language":116,"meta":40,"style":40},"npm i @nuxt/devtools-kit\n",[987],{"type":46,"tag":77,"props":988,"children":989},{"__ignoreMap":40},[990],{"type":46,"tag":122,"props":991,"children":992},{"class":124,"line":125},[993,997,1001],{"type":46,"tag":122,"props":994,"children":995},{"style":129},[996],{"type":55,"value":132},{"type":46,"tag":122,"props":998,"children":999},{"style":135},[1000],{"type":55,"value":138},{"type":46,"tag":122,"props":1002,"children":1003},{"style":135},[1004],{"type":55,"value":1005}," @nuxt/devtools-kit\n",{"type":46,"tag":112,"props":1007,"children":1009},{"className":146,"code":1008,"language":148,"meta":40,"style":40},"import { addCustomTab } from '@nuxt/devtools-kit'\n",[1010],{"type":46,"tag":77,"props":1011,"children":1012},{"__ignoreMap":40},[1013],{"type":46,"tag":122,"props":1014,"children":1015},{"class":124,"line":125},[1016,1021,1026,1031,1036,1041,1045,1050],{"type":46,"tag":122,"props":1017,"children":1018},{"style":158},[1019],{"type":55,"value":1020},"import",{"type":46,"tag":122,"props":1022,"children":1023},{"style":181},[1024],{"type":55,"value":1025}," {",{"type":46,"tag":122,"props":1027,"children":1028},{"style":175},[1029],{"type":55,"value":1030}," addCustomTab",{"type":46,"tag":122,"props":1032,"children":1033},{"style":181},[1034],{"type":55,"value":1035}," }",{"type":46,"tag":122,"props":1037,"children":1038},{"style":158},[1039],{"type":55,"value":1040}," from",{"type":46,"tag":122,"props":1042,"children":1043},{"style":181},[1044],{"type":55,"value":816},{"type":46,"tag":122,"props":1046,"children":1047},{"style":135},[1048],{"type":55,"value":1049},"@nuxt/devtools-kit",{"type":46,"tag":122,"props":1051,"children":1052},{"style":181},[1053],{"type":55,"value":223},{"type":46,"tag":51,"props":1055,"children":1056},{},[1057,1059,1063,1065,1070],{"type":55,"value":1058},"We recommend module authors to install ",{"type":46,"tag":77,"props":1060,"children":1061},{"className":40},[1062],{"type":55,"value":1049},{"type":55,"value":1064}," as a dependency and ",{"type":46,"tag":77,"props":1066,"children":1067},{"className":40},[1068],{"type":55,"value":1069},"@nuxt/devtools",{"type":55,"value":1071}," as a dev dependency.",{"type":46,"tag":85,"props":1073,"children":1075},{"id":1074},"nuxtdevtools-kit",[1076],{"type":46,"tag":77,"props":1077,"children":1078},{"className":40},[1079],{"type":55,"value":1049},{"type":46,"tag":105,"props":1081,"children":1083},{"id":1082},"addcustomtab",[1084],{"type":46,"tag":77,"props":1085,"children":1086},{"className":40},[1087],{"type":55,"value":1088},"addCustomTab()",{"type":46,"tag":51,"props":1090,"children":1091},{},[1092,1094,1099],{"type":55,"value":1093},"A shorthand for calling the hook ",{"type":46,"tag":77,"props":1095,"children":1096},{"className":40},[1097],{"type":55,"value":1098},"devtools:customTabs",{"type":55,"value":83},{"type":46,"tag":112,"props":1101,"children":1103},{"className":146,"code":1102,"language":148,"meta":40,"style":40},"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",[1104],{"type":46,"tag":77,"props":1105,"children":1106},{"__ignoreMap":40},[1107,1142,1151,1182,1190,1219,1227,1256,1264,1293,1301,1317,1346,1375,1384],{"type":46,"tag":122,"props":1108,"children":1109},{"class":124,"line":125},[1110,1114,1118,1122,1126,1130,1134,1138],{"type":46,"tag":122,"props":1111,"children":1112},{"style":158},[1113],{"type":55,"value":1020},{"type":46,"tag":122,"props":1115,"children":1116},{"style":181},[1117],{"type":55,"value":1025},{"type":46,"tag":122,"props":1119,"children":1120},{"style":175},[1121],{"type":55,"value":1030},{"type":46,"tag":122,"props":1123,"children":1124},{"style":181},[1125],{"type":55,"value":1035},{"type":46,"tag":122,"props":1127,"children":1128},{"style":158},[1129],{"type":55,"value":1040},{"type":46,"tag":122,"props":1131,"children":1132},{"style":181},[1133],{"type":55,"value":816},{"type":46,"tag":122,"props":1135,"children":1136},{"style":135},[1137],{"type":55,"value":1049},{"type":46,"tag":122,"props":1139,"children":1140},{"style":181},[1141],{"type":55,"value":223},{"type":46,"tag":122,"props":1143,"children":1144},{"class":124,"line":187},[1145],{"type":46,"tag":122,"props":1146,"children":1148},{"emptyLinePlaceholder":1147},true,[1149],{"type":55,"value":1150},"\n",{"type":46,"tag":122,"props":1152,"children":1153},{"class":124,"line":207},[1154,1159,1163,1168,1173,1178],{"type":46,"tag":122,"props":1155,"children":1156},{"style":169},[1157],{"type":55,"value":1158},"addCustomTab",{"type":46,"tag":122,"props":1160,"children":1161},{"style":175},[1162],{"type":55,"value":178},{"type":46,"tag":122,"props":1164,"children":1165},{"style":181},[1166],{"type":55,"value":1167},"()",{"type":46,"tag":122,"props":1169,"children":1170},{"style":318},[1171],{"type":55,"value":1172}," =>",{"type":46,"tag":122,"props":1174,"children":1175},{"style":175},[1176],{"type":55,"value":1177}," (",{"type":46,"tag":122,"props":1179,"children":1180},{"style":181},[1181],{"type":55,"value":184},{"type":46,"tag":122,"props":1183,"children":1184},{"class":124,"line":226},[1185],{"type":46,"tag":122,"props":1186,"children":1187},{"style":530},[1188],{"type":55,"value":1189},"  // unique identifier\n",{"type":46,"tag":122,"props":1191,"children":1192},{"class":124,"line":235},[1193,1198,1202,1206,1211,1215],{"type":46,"tag":122,"props":1194,"children":1195},{"style":191},[1196],{"type":55,"value":1197},"  name",{"type":46,"tag":122,"props":1199,"children":1200},{"style":181},[1201],{"type":55,"value":199},{"type":46,"tag":122,"props":1203,"children":1204},{"style":181},[1205],{"type":55,"value":816},{"type":46,"tag":122,"props":1207,"children":1208},{"style":135},[1209],{"type":55,"value":1210},"my-module",{"type":46,"tag":122,"props":1212,"children":1213},{"style":181},[1214],{"type":55,"value":807},{"type":46,"tag":122,"props":1216,"children":1217},{"style":181},[1218],{"type":55,"value":753},{"type":46,"tag":122,"props":1220,"children":1221},{"class":124,"line":756},[1222],{"type":46,"tag":122,"props":1223,"children":1224},{"style":530},[1225],{"type":55,"value":1226},"  // title to display in the tab\n",{"type":46,"tag":122,"props":1228,"children":1229},{"class":124,"line":774},[1230,1235,1239,1243,1248,1252],{"type":46,"tag":122,"props":1231,"children":1232},{"style":191},[1233],{"type":55,"value":1234},"  title",{"type":46,"tag":122,"props":1236,"children":1237},{"style":181},[1238],{"type":55,"value":199},{"type":46,"tag":122,"props":1240,"children":1241},{"style":181},[1242],{"type":55,"value":816},{"type":46,"tag":122,"props":1244,"children":1245},{"style":135},[1246],{"type":55,"value":1247},"My Module",{"type":46,"tag":122,"props":1249,"children":1250},{"style":181},[1251],{"type":55,"value":807},{"type":46,"tag":122,"props":1253,"children":1254},{"style":181},[1255],{"type":55,"value":753},{"type":46,"tag":122,"props":1257,"children":1258},{"class":124,"line":791},[1259],{"type":46,"tag":122,"props":1260,"children":1261},{"style":530},[1262],{"type":55,"value":1263},"  // any icon from Iconify, or a URL to an image\n",{"type":46,"tag":122,"props":1265,"children":1266},{"class":124,"line":832},[1267,1272,1276,1280,1285,1289],{"type":46,"tag":122,"props":1268,"children":1269},{"style":191},[1270],{"type":55,"value":1271},"  icon",{"type":46,"tag":122,"props":1273,"children":1274},{"style":181},[1275],{"type":55,"value":199},{"type":46,"tag":122,"props":1277,"children":1278},{"style":181},[1279],{"type":55,"value":816},{"type":46,"tag":122,"props":1281,"children":1282},{"style":135},[1283],{"type":55,"value":1284},"carbon:apps",{"type":46,"tag":122,"props":1286,"children":1287},{"style":181},[1288],{"type":55,"value":807},{"type":46,"tag":122,"props":1290,"children":1291},{"style":181},[1292],{"type":55,"value":753},{"type":46,"tag":122,"props":1294,"children":1295},{"class":124,"line":870},[1296],{"type":46,"tag":122,"props":1297,"children":1298},{"style":530},[1299],{"type":55,"value":1300},"  // iframe view\n",{"type":46,"tag":122,"props":1302,"children":1303},{"class":124,"line":908},[1304,1309,1313],{"type":46,"tag":122,"props":1305,"children":1306},{"style":191},[1307],{"type":55,"value":1308},"  view",{"type":46,"tag":122,"props":1310,"children":1311},{"style":181},[1312],{"type":55,"value":199},{"type":46,"tag":122,"props":1314,"children":1315},{"style":181},[1316],{"type":55,"value":771},{"type":46,"tag":122,"props":1318,"children":1319},{"class":124,"line":917},[1320,1325,1329,1333,1338,1342],{"type":46,"tag":122,"props":1321,"children":1322},{"style":191},[1323],{"type":55,"value":1324},"    type",{"type":46,"tag":122,"props":1326,"children":1327},{"style":181},[1328],{"type":55,"value":199},{"type":46,"tag":122,"props":1330,"children":1331},{"style":181},[1332],{"type":55,"value":816},{"type":46,"tag":122,"props":1334,"children":1335},{"style":135},[1336],{"type":55,"value":1337},"iframe",{"type":46,"tag":122,"props":1339,"children":1340},{"style":181},[1341],{"type":55,"value":807},{"type":46,"tag":122,"props":1343,"children":1344},{"style":181},[1345],{"type":55,"value":753},{"type":46,"tag":122,"props":1347,"children":1348},{"class":124,"line":926},[1349,1354,1358,1362,1367,1371],{"type":46,"tag":122,"props":1350,"children":1351},{"style":191},[1352],{"type":55,"value":1353},"    src",{"type":46,"tag":122,"props":1355,"children":1356},{"style":181},[1357],{"type":55,"value":199},{"type":46,"tag":122,"props":1359,"children":1360},{"style":181},[1361],{"type":55,"value":816},{"type":46,"tag":122,"props":1363,"children":1364},{"style":135},[1365],{"type":55,"value":1366},"/url-to-your-module-view",{"type":46,"tag":122,"props":1368,"children":1369},{"style":181},[1370],{"type":55,"value":807},{"type":46,"tag":122,"props":1372,"children":1373},{"style":181},[1374],{"type":55,"value":753},{"type":46,"tag":122,"props":1376,"children":1378},{"class":124,"line":1377},14,[1379],{"type":46,"tag":122,"props":1380,"children":1381},{"style":181},[1382],{"type":55,"value":1383},"  },\n",{"type":46,"tag":122,"props":1385,"children":1387},{"class":124,"line":1386},15,[1388,1392],{"type":46,"tag":122,"props":1389,"children":1390},{"style":181},[1391],{"type":55,"value":241},{"type":46,"tag":122,"props":1393,"children":1394},{"style":175},[1395],{"type":55,"value":1396},"))\n",{"type":46,"tag":105,"props":1398,"children":1400},{"id":1399},"refreshcustomtabs",[1401],{"type":46,"tag":77,"props":1402,"children":1403},{"className":40},[1404],{"type":55,"value":1405},"refreshCustomTabs()",{"type":46,"tag":51,"props":1407,"children":1408},{},[1409,1411,1416],{"type":55,"value":1410},"A shorthand for call hook ",{"type":46,"tag":77,"props":1412,"children":1413},{"className":40},[1414],{"type":55,"value":1415},"devtools:customTabs:refresh",{"type":55,"value":1417},". It will refresh all custom tabs.",{"type":46,"tag":105,"props":1419,"children":1421},{"id":1420},"startsubprocess",[1422],{"type":46,"tag":77,"props":1423,"children":1424},{"className":40},[1425],{"type":55,"value":1426},"startSubprocess()",{"type":46,"tag":51,"props":1428,"children":1429},{},[1430,1432,1437],{"type":55,"value":1431},"Start a sub process using ",{"type":46,"tag":77,"props":1433,"children":1434},{"className":40},[1435],{"type":55,"value":1436},"execa",{"type":55,"value":1438}," and create a terminal tab in DevTools.",{"type":46,"tag":112,"props":1440,"children":1442},{"className":146,"code":1441,"language":148,"meta":40,"style":40},"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",[1443],{"type":46,"tag":77,"props":1444,"children":1445},{"__ignoreMap":40},[1446,1482,1489,1515,1523,1552,1568,1588,1608,1628,1660,1672,1679,1686,1715,1744,1774,1782],{"type":46,"tag":122,"props":1447,"children":1448},{"class":124,"line":125},[1449,1453,1457,1462,1466,1470,1474,1478],{"type":46,"tag":122,"props":1450,"children":1451},{"style":158},[1452],{"type":55,"value":1020},{"type":46,"tag":122,"props":1454,"children":1455},{"style":181},[1456],{"type":55,"value":1025},{"type":46,"tag":122,"props":1458,"children":1459},{"style":175},[1460],{"type":55,"value":1461}," startSubprocess",{"type":46,"tag":122,"props":1463,"children":1464},{"style":181},[1465],{"type":55,"value":1035},{"type":46,"tag":122,"props":1467,"children":1468},{"style":158},[1469],{"type":55,"value":1040},{"type":46,"tag":122,"props":1471,"children":1472},{"style":181},[1473],{"type":55,"value":816},{"type":46,"tag":122,"props":1475,"children":1476},{"style":135},[1477],{"type":55,"value":1049},{"type":46,"tag":122,"props":1479,"children":1480},{"style":181},[1481],{"type":55,"value":223},{"type":46,"tag":122,"props":1483,"children":1484},{"class":124,"line":187},[1485],{"type":46,"tag":122,"props":1486,"children":1487},{"emptyLinePlaceholder":1147},[1488],{"type":55,"value":1150},{"type":46,"tag":122,"props":1490,"children":1491},{"class":124,"line":207},[1492,1497,1502,1506,1510],{"type":46,"tag":122,"props":1493,"children":1494},{"style":318},[1495],{"type":55,"value":1496},"const",{"type":46,"tag":122,"props":1498,"children":1499},{"style":175},[1500],{"type":55,"value":1501}," subprocess ",{"type":46,"tag":122,"props":1503,"children":1504},{"style":181},[1505],{"type":55,"value":326},{"type":46,"tag":122,"props":1507,"children":1508},{"style":169},[1509],{"type":55,"value":1461},{"type":46,"tag":122,"props":1511,"children":1512},{"style":175},[1513],{"type":55,"value":1514},"(\n",{"type":46,"tag":122,"props":1516,"children":1517},{"class":124,"line":226},[1518],{"type":46,"tag":122,"props":1519,"children":1520},{"style":181},[1521],{"type":55,"value":1522},"  {\n",{"type":46,"tag":122,"props":1524,"children":1525},{"class":124,"line":235},[1526,1531,1535,1539,1544,1548],{"type":46,"tag":122,"props":1527,"children":1528},{"style":191},[1529],{"type":55,"value":1530},"    command",{"type":46,"tag":122,"props":1532,"children":1533},{"style":181},[1534],{"type":55,"value":199},{"type":46,"tag":122,"props":1536,"children":1537},{"style":181},[1538],{"type":55,"value":816},{"type":46,"tag":122,"props":1540,"children":1541},{"style":135},[1542],{"type":55,"value":1543},"code-server",{"type":46,"tag":122,"props":1545,"children":1546},{"style":181},[1547],{"type":55,"value":807},{"type":46,"tag":122,"props":1549,"children":1550},{"style":181},[1551],{"type":55,"value":753},{"type":46,"tag":122,"props":1553,"children":1554},{"class":124,"line":756},[1555,1560,1564],{"type":46,"tag":122,"props":1556,"children":1557},{"style":191},[1558],{"type":55,"value":1559},"    args",{"type":46,"tag":122,"props":1561,"children":1562},{"style":181},[1563],{"type":55,"value":199},{"type":46,"tag":122,"props":1565,"children":1566},{"style":175},[1567],{"type":55,"value":204},{"type":46,"tag":122,"props":1569,"children":1570},{"class":124,"line":774},[1571,1575,1580,1584],{"type":46,"tag":122,"props":1572,"children":1573},{"style":181},[1574],{"type":55,"value":797},{"type":46,"tag":122,"props":1576,"children":1577},{"style":135},[1578],{"type":55,"value":1579},"serve-local",{"type":46,"tag":122,"props":1581,"children":1582},{"style":181},[1583],{"type":55,"value":807},{"type":46,"tag":122,"props":1585,"children":1586},{"style":181},[1587],{"type":55,"value":753},{"type":46,"tag":122,"props":1589,"children":1590},{"class":124,"line":791},[1591,1595,1600,1604],{"type":46,"tag":122,"props":1592,"children":1593},{"style":181},[1594],{"type":55,"value":797},{"type":46,"tag":122,"props":1596,"children":1597},{"style":135},[1598],{"type":55,"value":1599},"--accept-server-license-terms",{"type":46,"tag":122,"props":1601,"children":1602},{"style":181},[1603],{"type":55,"value":807},{"type":46,"tag":122,"props":1605,"children":1606},{"style":181},[1607],{"type":55,"value":753},{"type":46,"tag":122,"props":1609,"children":1610},{"class":124,"line":832},[1611,1615,1620,1624],{"type":46,"tag":122,"props":1612,"children":1613},{"style":181},[1614],{"type":55,"value":797},{"type":46,"tag":122,"props":1616,"children":1617},{"style":135},[1618],{"type":55,"value":1619},"--without-connection-token",{"type":46,"tag":122,"props":1621,"children":1622},{"style":181},[1623],{"type":55,"value":807},{"type":46,"tag":122,"props":1625,"children":1626},{"style":181},[1627],{"type":55,"value":753},{"type":46,"tag":122,"props":1629,"children":1630},{"class":124,"line":870},[1631,1636,1641,1646,1651,1656],{"type":46,"tag":122,"props":1632,"children":1633},{"style":181},[1634],{"type":55,"value":1635},"      `",{"type":46,"tag":122,"props":1637,"children":1638},{"style":135},[1639],{"type":55,"value":1640},"--port=",{"type":46,"tag":122,"props":1642,"children":1643},{"style":181},[1644],{"type":55,"value":1645},"${",{"type":46,"tag":122,"props":1647,"children":1648},{"style":175},[1649],{"type":55,"value":1650},"port",{"type":46,"tag":122,"props":1652,"children":1653},{"style":181},[1654],{"type":55,"value":1655},"}`",{"type":46,"tag":122,"props":1657,"children":1658},{"style":181},[1659],{"type":55,"value":753},{"type":46,"tag":122,"props":1661,"children":1662},{"class":124,"line":908},[1663,1668],{"type":46,"tag":122,"props":1664,"children":1665},{"style":175},[1666],{"type":55,"value":1667},"    ]",{"type":46,"tag":122,"props":1669,"children":1670},{"style":181},[1671],{"type":55,"value":753},{"type":46,"tag":122,"props":1673,"children":1674},{"class":124,"line":917},[1675],{"type":46,"tag":122,"props":1676,"children":1677},{"style":181},[1678],{"type":55,"value":1383},{"type":46,"tag":122,"props":1680,"children":1681},{"class":124,"line":926},[1682],{"type":46,"tag":122,"props":1683,"children":1684},{"style":181},[1685],{"type":55,"value":1522},{"type":46,"tag":122,"props":1687,"children":1688},{"class":124,"line":1377},[1689,1694,1698,1702,1707,1711],{"type":46,"tag":122,"props":1690,"children":1691},{"style":191},[1692],{"type":55,"value":1693},"    id",{"type":46,"tag":122,"props":1695,"children":1696},{"style":181},[1697],{"type":55,"value":199},{"type":46,"tag":122,"props":1699,"children":1700},{"style":181},[1701],{"type":55,"value":816},{"type":46,"tag":122,"props":1703,"children":1704},{"style":135},[1705],{"type":55,"value":1706},"devtools:vscode",{"type":46,"tag":122,"props":1708,"children":1709},{"style":181},[1710],{"type":55,"value":807},{"type":46,"tag":122,"props":1712,"children":1713},{"style":181},[1714],{"type":55,"value":753},{"type":46,"tag":122,"props":1716,"children":1717},{"class":124,"line":1386},[1718,1723,1727,1731,1736,1740],{"type":46,"tag":122,"props":1719,"children":1720},{"style":191},[1721],{"type":55,"value":1722},"    name",{"type":46,"tag":122,"props":1724,"children":1725},{"style":181},[1726],{"type":55,"value":199},{"type":46,"tag":122,"props":1728,"children":1729},{"style":181},[1730],{"type":55,"value":816},{"type":46,"tag":122,"props":1732,"children":1733},{"style":135},[1734],{"type":55,"value":1735},"VS Code Server",{"type":46,"tag":122,"props":1737,"children":1738},{"style":181},[1739],{"type":55,"value":807},{"type":46,"tag":122,"props":1741,"children":1742},{"style":181},[1743],{"type":55,"value":753},{"type":46,"tag":122,"props":1745,"children":1747},{"class":124,"line":1746},16,[1748,1753,1757,1761,1766,1770],{"type":46,"tag":122,"props":1749,"children":1750},{"style":191},[1751],{"type":55,"value":1752},"    icon",{"type":46,"tag":122,"props":1754,"children":1755},{"style":181},[1756],{"type":55,"value":199},{"type":46,"tag":122,"props":1758,"children":1759},{"style":181},[1760],{"type":55,"value":816},{"type":46,"tag":122,"props":1762,"children":1763},{"style":135},[1764],{"type":55,"value":1765},"logos-visual-studio-code",{"type":46,"tag":122,"props":1767,"children":1768},{"style":181},[1769],{"type":55,"value":807},{"type":46,"tag":122,"props":1771,"children":1772},{"style":181},[1773],{"type":55,"value":753},{"type":46,"tag":122,"props":1775,"children":1777},{"class":124,"line":1776},17,[1778],{"type":46,"tag":122,"props":1779,"children":1780},{"style":181},[1781],{"type":55,"value":1383},{"type":46,"tag":122,"props":1783,"children":1785},{"class":124,"line":1784},18,[1786],{"type":46,"tag":122,"props":1787,"children":1788},{"style":175},[1789],{"type":55,"value":246},{"type":46,"tag":112,"props":1791,"children":1793},{"className":146,"code":1792,"language":148,"meta":40,"style":40},"subprocess.restart()\nsubprocess.terminate()\n",[1794],{"type":46,"tag":77,"props":1795,"children":1796},{"__ignoreMap":40},[1797,1819],{"type":46,"tag":122,"props":1798,"children":1799},{"class":124,"line":125},[1800,1805,1809,1814],{"type":46,"tag":122,"props":1801,"children":1802},{"style":175},[1803],{"type":55,"value":1804},"subprocess",{"type":46,"tag":122,"props":1806,"children":1807},{"style":181},[1808],{"type":55,"value":83},{"type":46,"tag":122,"props":1810,"children":1811},{"style":169},[1812],{"type":55,"value":1813},"restart",{"type":46,"tag":122,"props":1815,"children":1816},{"style":175},[1817],{"type":55,"value":1818},"()\n",{"type":46,"tag":122,"props":1820,"children":1821},{"class":124,"line":187},[1822,1826,1830,1835],{"type":46,"tag":122,"props":1823,"children":1824},{"style":175},[1825],{"type":55,"value":1804},{"type":46,"tag":122,"props":1827,"children":1828},{"style":181},[1829],{"type":55,"value":83},{"type":46,"tag":122,"props":1831,"children":1832},{"style":169},[1833],{"type":55,"value":1834},"terminate",{"type":46,"tag":122,"props":1836,"children":1837},{"style":175},[1838],{"type":55,"value":1818},{"type":46,"tag":105,"props":1840,"children":1842},{"id":1841},"extendserverrpc",[1843],{"type":46,"tag":77,"props":1844,"children":1845},{"className":40},[1846],{"type":55,"value":1847},"extendServerRpc()",{"type":46,"tag":51,"props":1849,"children":1850},{},[1851],{"type":55,"value":1852},"Extend the server RPC with your own methods.",{"type":46,"tag":112,"props":1854,"children":1856},{"className":146,"code":1855,"language":148,"meta":40,"style":40},"import { extendServerRpc } from '@nuxt/devtools-kit'\n\nconst rpc = extendServerRpc('my-module', {\n  async myMethod() {\n    return 'hello'\n  },\n})\n",[1857],{"type":46,"tag":77,"props":1858,"children":1859},{"__ignoreMap":40},[1860,1896,1903,1948,1969,1990,1997],{"type":46,"tag":122,"props":1861,"children":1862},{"class":124,"line":125},[1863,1867,1871,1876,1880,1884,1888,1892],{"type":46,"tag":122,"props":1864,"children":1865},{"style":158},[1866],{"type":55,"value":1020},{"type":46,"tag":122,"props":1868,"children":1869},{"style":181},[1870],{"type":55,"value":1025},{"type":46,"tag":122,"props":1872,"children":1873},{"style":175},[1874],{"type":55,"value":1875}," extendServerRpc",{"type":46,"tag":122,"props":1877,"children":1878},{"style":181},[1879],{"type":55,"value":1035},{"type":46,"tag":122,"props":1881,"children":1882},{"style":158},[1883],{"type":55,"value":1040},{"type":46,"tag":122,"props":1885,"children":1886},{"style":181},[1887],{"type":55,"value":816},{"type":46,"tag":122,"props":1889,"children":1890},{"style":135},[1891],{"type":55,"value":1049},{"type":46,"tag":122,"props":1893,"children":1894},{"style":181},[1895],{"type":55,"value":223},{"type":46,"tag":122,"props":1897,"children":1898},{"class":124,"line":187},[1899],{"type":46,"tag":122,"props":1900,"children":1901},{"emptyLinePlaceholder":1147},[1902],{"type":55,"value":1150},{"type":46,"tag":122,"props":1904,"children":1905},{"class":124,"line":207},[1906,1910,1915,1919,1923,1927,1931,1935,1939,1944],{"type":46,"tag":122,"props":1907,"children":1908},{"style":318},[1909],{"type":55,"value":1496},{"type":46,"tag":122,"props":1911,"children":1912},{"style":175},[1913],{"type":55,"value":1914}," rpc ",{"type":46,"tag":122,"props":1916,"children":1917},{"style":181},[1918],{"type":55,"value":326},{"type":46,"tag":122,"props":1920,"children":1921},{"style":169},[1922],{"type":55,"value":1875},{"type":46,"tag":122,"props":1924,"children":1925},{"style":175},[1926],{"type":55,"value":178},{"type":46,"tag":122,"props":1928,"children":1929},{"style":181},[1930],{"type":55,"value":807},{"type":46,"tag":122,"props":1932,"children":1933},{"style":135},[1934],{"type":55,"value":1210},{"type":46,"tag":122,"props":1936,"children":1937},{"style":181},[1938],{"type":55,"value":807},{"type":46,"tag":122,"props":1940,"children":1941},{"style":181},[1942],{"type":55,"value":1943},",",{"type":46,"tag":122,"props":1945,"children":1946},{"style":181},[1947],{"type":55,"value":771},{"type":46,"tag":122,"props":1949,"children":1950},{"class":124,"line":226},[1951,1956,1961,1965],{"type":46,"tag":122,"props":1952,"children":1953},{"style":318},[1954],{"type":55,"value":1955},"  async",{"type":46,"tag":122,"props":1957,"children":1958},{"style":191},[1959],{"type":55,"value":1960}," myMethod",{"type":46,"tag":122,"props":1962,"children":1963},{"style":181},[1964],{"type":55,"value":1167},{"type":46,"tag":122,"props":1966,"children":1967},{"style":181},[1968],{"type":55,"value":771},{"type":46,"tag":122,"props":1970,"children":1971},{"class":124,"line":235},[1972,1977,1981,1986],{"type":46,"tag":122,"props":1973,"children":1974},{"style":158},[1975],{"type":55,"value":1976},"    return",{"type":46,"tag":122,"props":1978,"children":1979},{"style":181},[1980],{"type":55,"value":816},{"type":46,"tag":122,"props":1982,"children":1983},{"style":135},[1984],{"type":55,"value":1985},"hello",{"type":46,"tag":122,"props":1987,"children":1988},{"style":181},[1989],{"type":55,"value":223},{"type":46,"tag":122,"props":1991,"children":1992},{"class":124,"line":756},[1993],{"type":46,"tag":122,"props":1994,"children":1995},{"style":181},[1996],{"type":55,"value":1383},{"type":46,"tag":122,"props":1998,"children":1999},{"class":124,"line":774},[2000,2004],{"type":46,"tag":122,"props":2001,"children":2002},{"style":181},[2003],{"type":55,"value":241},{"type":46,"tag":122,"props":2005,"children":2006},{"style":175},[2007],{"type":55,"value":246},{"type":46,"tag":51,"props":2009,"children":2010},{},[2011,2013,2019],{"type":55,"value":2012},"Learn more about ",{"type":46,"tag":58,"props":2014,"children":2016},{"href":2015},"/module/guide#custom-rpc-functions",[2017],{"type":55,"value":2018},"Custom RPC functions",{"type":55,"value":83},{"type":46,"tag":85,"props":2021,"children":2023},{"id":2022},"nuxtdevtools-kitiframe-client",[2024],{"type":46,"tag":77,"props":2025,"children":2026},{"className":40},[2027],{"type":55,"value":2028},"@nuxt/devtools-kit/iframe-client",{"type":46,"tag":51,"props":2030,"children":2031},{},[2032],{"type":55,"value":2033},"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":2035,"children":2036},{},[2037],{"type":55,"value":2038},"To get the infomation from the devtools and the client app, you can do this in your client app:",{"type":46,"tag":112,"props":2040,"children":2042},{"className":146,"code":2041,"language":148,"meta":40,"style":40},"import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'\n\nexport const devtoolsClient = useDevtoolsClient()\n",[2043],{"type":46,"tag":77,"props":2044,"children":2045},{"__ignoreMap":40},[2046,2082,2089],{"type":46,"tag":122,"props":2047,"children":2048},{"class":124,"line":125},[2049,2053,2057,2062,2066,2070,2074,2078],{"type":46,"tag":122,"props":2050,"children":2051},{"style":158},[2052],{"type":55,"value":1020},{"type":46,"tag":122,"props":2054,"children":2055},{"style":181},[2056],{"type":55,"value":1025},{"type":46,"tag":122,"props":2058,"children":2059},{"style":175},[2060],{"type":55,"value":2061}," useDevtoolsClient",{"type":46,"tag":122,"props":2063,"children":2064},{"style":181},[2065],{"type":55,"value":1035},{"type":46,"tag":122,"props":2067,"children":2068},{"style":158},[2069],{"type":55,"value":1040},{"type":46,"tag":122,"props":2071,"children":2072},{"style":181},[2073],{"type":55,"value":816},{"type":46,"tag":122,"props":2075,"children":2076},{"style":135},[2077],{"type":55,"value":2028},{"type":46,"tag":122,"props":2079,"children":2080},{"style":181},[2081],{"type":55,"value":223},{"type":46,"tag":122,"props":2083,"children":2084},{"class":124,"line":187},[2085],{"type":46,"tag":122,"props":2086,"children":2087},{"emptyLinePlaceholder":1147},[2088],{"type":55,"value":1150},{"type":46,"tag":122,"props":2090,"children":2091},{"class":124,"line":207},[2092,2096,2101,2106,2110,2114],{"type":46,"tag":122,"props":2093,"children":2094},{"style":158},[2095],{"type":55,"value":161},{"type":46,"tag":122,"props":2097,"children":2098},{"style":318},[2099],{"type":55,"value":2100}," const",{"type":46,"tag":122,"props":2102,"children":2103},{"style":175},[2104],{"type":55,"value":2105}," devtoolsClient ",{"type":46,"tag":122,"props":2107,"children":2108},{"style":181},[2109],{"type":55,"value":326},{"type":46,"tag":122,"props":2111,"children":2112},{"style":169},[2113],{"type":55,"value":2061},{"type":46,"tag":122,"props":2115,"children":2116},{"style":175},[2117],{"type":55,"value":1818},{"type":46,"tag":51,"props":2119,"children":2120},{},[2121,2123,2128,2130,2135],{"type":55,"value":2122},"When the iframe been served with the same origin (CORS limitation), devtools will automatically inject ",{"type":46,"tag":77,"props":2124,"children":2125},{"className":40},[2126],{"type":55,"value":2127},"__NUXT_DEVTOOLS__",{"type":55,"value":2129}," to the iframe's window object. You can access it as a ref using ",{"type":46,"tag":77,"props":2131,"children":2132},{"className":40},[2133],{"type":55,"value":2134},"useDevtoolsClient()",{"type":55,"value":2136}," utility.",{"type":46,"tag":105,"props":2138,"children":2140},{"id":2139},"usedevtoolsclient",[2141],{"type":46,"tag":77,"props":2142,"children":2143},{"className":40},[2144],{"type":55,"value":2134},{"type":46,"tag":51,"props":2146,"children":2147},{},[2148,2150,2155,2157,2162],{"type":55,"value":2149},"It will return a ref of ",{"type":46,"tag":77,"props":2151,"children":2152},{"className":40},[2153],{"type":55,"value":2154},"NuxtDevtoolsIframeClient",{"type":55,"value":2156}," object that are intially ",{"type":46,"tag":77,"props":2158,"children":2159},{"className":40},[2160],{"type":55,"value":2161},"null",{"type":55,"value":2163}," and will be updated when the connection is ready.",{"type":46,"tag":51,"props":2165,"children":2166},{},[2167,2171],{"type":46,"tag":77,"props":2168,"children":2169},{"className":40},[2170],{"type":55,"value":2154},{"type":55,"value":2172}," contains two properties:",{"type":46,"tag":2174,"props":2175,"children":2176},"ul",{},[2177,2188],{"type":46,"tag":2178,"props":2179,"children":2180},"li",{},[2181,2186],{"type":46,"tag":77,"props":2182,"children":2183},{"className":40},[2184],{"type":55,"value":2185},"host",{"type":55,"value":2187},": APIs to communicate with the client app",{"type":46,"tag":2178,"props":2189,"children":2190},{},[2191,2196],{"type":46,"tag":77,"props":2192,"children":2193},{"className":40},[2194],{"type":55,"value":2195},"devtools",{"type":55,"value":2197},": APIs to communicate with the devtools",{"type":46,"tag":51,"props":2199,"children":2200},{},[2201,2205],{"type":46,"tag":77,"props":2202,"children":2203},{"className":40},[2204],{"type":55,"value":2185},{"type":55,"value":2206}," can be undefined when devtools are accessed standalone or from a different origin.",{"type":46,"tag":51,"props":2208,"children":2209},{},[2210],{"type":55,"value":2211},"For example, you can get the router instance from the client app:",{"type":46,"tag":112,"props":2213,"children":2215},{"className":146,"code":2214,"language":148,"meta":40,"style":40},"const router = computed(() => devtoolsClient.value?.host?.nuxt.vueApp.config.globalProperties?.$router)\n",[2216],{"type":46,"tag":77,"props":2217,"children":2218},{"__ignoreMap":40},[2219],{"type":46,"tag":122,"props":2220,"children":2221},{"class":124,"line":125},[2222,2226,2231,2235,2240,2244,2248,2252,2257,2261,2266,2271,2275,2279,2284,2288,2293,2297,2302,2306,2311,2315],{"type":46,"tag":122,"props":2223,"children":2224},{"style":318},[2225],{"type":55,"value":1496},{"type":46,"tag":122,"props":2227,"children":2228},{"style":175},[2229],{"type":55,"value":2230}," router ",{"type":46,"tag":122,"props":2232,"children":2233},{"style":181},[2234],{"type":55,"value":326},{"type":46,"tag":122,"props":2236,"children":2237},{"style":169},[2238],{"type":55,"value":2239}," computed",{"type":46,"tag":122,"props":2241,"children":2242},{"style":175},[2243],{"type":55,"value":178},{"type":46,"tag":122,"props":2245,"children":2246},{"style":181},[2247],{"type":55,"value":1167},{"type":46,"tag":122,"props":2249,"children":2250},{"style":318},[2251],{"type":55,"value":1172},{"type":46,"tag":122,"props":2253,"children":2254},{"style":175},[2255],{"type":55,"value":2256}," devtoolsClient",{"type":46,"tag":122,"props":2258,"children":2259},{"style":181},[2260],{"type":55,"value":83},{"type":46,"tag":122,"props":2262,"children":2263},{"style":175},[2264],{"type":55,"value":2265},"value",{"type":46,"tag":122,"props":2267,"children":2268},{"style":181},[2269],{"type":55,"value":2270},"?.",{"type":46,"tag":122,"props":2272,"children":2273},{"style":175},[2274],{"type":55,"value":2185},{"type":46,"tag":122,"props":2276,"children":2277},{"style":181},[2278],{"type":55,"value":2270},{"type":46,"tag":122,"props":2280,"children":2281},{"style":175},[2282],{"type":55,"value":2283},"nuxt",{"type":46,"tag":122,"props":2285,"children":2286},{"style":181},[2287],{"type":55,"value":83},{"type":46,"tag":122,"props":2289,"children":2290},{"style":175},[2291],{"type":55,"value":2292},"vueApp",{"type":46,"tag":122,"props":2294,"children":2295},{"style":181},[2296],{"type":55,"value":83},{"type":46,"tag":122,"props":2298,"children":2299},{"style":175},[2300],{"type":55,"value":2301},"config",{"type":46,"tag":122,"props":2303,"children":2304},{"style":181},[2305],{"type":55,"value":83},{"type":46,"tag":122,"props":2307,"children":2308},{"style":175},[2309],{"type":55,"value":2310},"globalProperties",{"type":46,"tag":122,"props":2312,"children":2313},{"style":181},[2314],{"type":55,"value":2270},{"type":46,"tag":122,"props":2316,"children":2317},{"style":175},[2318],{"type":55,"value":2319},"$router)\n",{"type":46,"tag":105,"props":2321,"children":2323},{"id":2322},"ondevtoolsclientconnected",[2324],{"type":46,"tag":77,"props":2325,"children":2326},{"className":40},[2327],{"type":55,"value":2328},"onDevtoolsClientConnected()",{"type":46,"tag":51,"props":2330,"children":2331},{},[2332,2334,2338],{"type":55,"value":2333},"Similiar to ",{"type":46,"tag":77,"props":2335,"children":2336},{"className":40},[2337],{"type":55,"value":2134},{"type":55,"value":2339}," but as a callback style:",{"type":46,"tag":112,"props":2341,"children":2343},{"className":146,"code":2342,"language":148,"meta":40,"style":40},"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",[2344],{"type":46,"tag":77,"props":2345,"children":2346},{"__ignoreMap":40},[2347,2383,2390,2430,2438,2445,2498,2506],{"type":46,"tag":122,"props":2348,"children":2349},{"class":124,"line":125},[2350,2354,2358,2363,2367,2371,2375,2379],{"type":46,"tag":122,"props":2351,"children":2352},{"style":158},[2353],{"type":55,"value":1020},{"type":46,"tag":122,"props":2355,"children":2356},{"style":181},[2357],{"type":55,"value":1025},{"type":46,"tag":122,"props":2359,"children":2360},{"style":175},[2361],{"type":55,"value":2362}," onDevtoolsClientConnected",{"type":46,"tag":122,"props":2364,"children":2365},{"style":181},[2366],{"type":55,"value":1035},{"type":46,"tag":122,"props":2368,"children":2369},{"style":158},[2370],{"type":55,"value":1040},{"type":46,"tag":122,"props":2372,"children":2373},{"style":181},[2374],{"type":55,"value":816},{"type":46,"tag":122,"props":2376,"children":2377},{"style":135},[2378],{"type":55,"value":2028},{"type":46,"tag":122,"props":2380,"children":2381},{"style":181},[2382],{"type":55,"value":223},{"type":46,"tag":122,"props":2384,"children":2385},{"class":124,"line":187},[2386],{"type":46,"tag":122,"props":2387,"children":2388},{"emptyLinePlaceholder":1147},[2389],{"type":55,"value":1150},{"type":46,"tag":122,"props":2391,"children":2392},{"class":124,"line":207},[2393,2398,2402,2407,2411,2417,2422,2426],{"type":46,"tag":122,"props":2394,"children":2395},{"style":169},[2396],{"type":55,"value":2397},"onDevtoolsClientConnected",{"type":46,"tag":122,"props":2399,"children":2400},{"style":175},[2401],{"type":55,"value":178},{"type":46,"tag":122,"props":2403,"children":2404},{"style":318},[2405],{"type":55,"value":2406},"async",{"type":46,"tag":122,"props":2408,"children":2409},{"style":181},[2410],{"type":55,"value":1177},{"type":46,"tag":122,"props":2412,"children":2414},{"style":2413},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8;--shiki-light-font-style:italic;--shiki-default-font-style:italic;--shiki-dark-font-style:italic",[2415],{"type":55,"value":2416},"client",{"type":46,"tag":122,"props":2418,"children":2419},{"style":181},[2420],{"type":55,"value":2421},")",{"type":46,"tag":122,"props":2423,"children":2424},{"style":318},[2425],{"type":55,"value":1172},{"type":46,"tag":122,"props":2427,"children":2428},{"style":181},[2429],{"type":55,"value":771},{"type":46,"tag":122,"props":2431,"children":2432},{"class":124,"line":226},[2433],{"type":46,"tag":122,"props":2434,"children":2435},{"style":530},[2436],{"type":55,"value":2437},"  // client is NuxtDevtoolsIframeClient\n",{"type":46,"tag":122,"props":2439,"children":2440},{"class":124,"line":235},[2441],{"type":46,"tag":122,"props":2442,"children":2443},{"emptyLinePlaceholder":1147},[2444],{"type":55,"value":1150},{"type":46,"tag":122,"props":2446,"children":2447},{"class":124,"line":756},[2448,2453,2458,2463,2468,2472,2476,2480,2485,2489,2494],{"type":46,"tag":122,"props":2449,"children":2450},{"style":318},[2451],{"type":55,"value":2452},"  const",{"type":46,"tag":122,"props":2454,"children":2455},{"style":175},[2456],{"type":55,"value":2457}," config",{"type":46,"tag":122,"props":2459,"children":2460},{"style":181},[2461],{"type":55,"value":2462}," =",{"type":46,"tag":122,"props":2464,"children":2465},{"style":175},[2466],{"type":55,"value":2467}," client",{"type":46,"tag":122,"props":2469,"children":2470},{"style":181},[2471],{"type":55,"value":83},{"type":46,"tag":122,"props":2473,"children":2474},{"style":175},[2475],{"type":55,"value":2195},{"type":46,"tag":122,"props":2477,"children":2478},{"style":181},[2479],{"type":55,"value":83},{"type":46,"tag":122,"props":2481,"children":2482},{"style":175},[2483],{"type":55,"value":2484},"rpc",{"type":46,"tag":122,"props":2486,"children":2487},{"style":181},[2488],{"type":55,"value":83},{"type":46,"tag":122,"props":2490,"children":2491},{"style":169},[2492],{"type":55,"value":2493},"getServerConfig",{"type":46,"tag":122,"props":2495,"children":2496},{"style":191},[2497],{"type":55,"value":1818},{"type":46,"tag":122,"props":2499,"children":2500},{"class":124,"line":774},[2501],{"type":46,"tag":122,"props":2502,"children":2503},{"style":530},[2504],{"type":55,"value":2505},"  // ...\n",{"type":46,"tag":122,"props":2507,"children":2508},{"class":124,"line":791},[2509,2513],{"type":46,"tag":122,"props":2510,"children":2511},{"style":181},[2512],{"type":55,"value":241},{"type":46,"tag":122,"props":2514,"children":2515},{"style":175},[2516],{"type":55,"value":246},{"type":46,"tag":950,"props":2518,"children":2519},{},[2520],{"type":55,"value":954},{"title":40,"searchDepth":187,"depth":187,"links":2522},[2523,2529],{"id":1074,"depth":187,"text":1049,"children":2524},[2525,2526,2527,2528],{"id":1082,"depth":207,"text":1088},{"id":1399,"depth":207,"text":1405},{"id":1420,"depth":207,"text":1426},{"id":1841,"depth":207,"text":1847},{"id":2022,"depth":187,"text":2028,"children":2530},[2531,2532],{"id":2139,"depth":207,"text":2134},{"id":2322,"depth":207,"text":2328},"content:2.module:1.utils-kit.md","2.module/1.utils-kit.md",{"_path":36,"_dir":2536,"_draft":39,"_partial":39,"_locale":40,"title":35,"description":2537,"body":2538,"_type":963,"_id":2864,"_source":965,"_file":2865,"_extension":362},"development","Learn how to contribute to the Nuxt DevTools.",{"type":43,"children":2539,"toc":2856},[2540,2545,2551,2564,2569,2607,2630,2636,2641,2662,2667,2686,2704,2709,2726,2732,2744,2755,2773,2847,2852],{"type":46,"tag":51,"props":2541,"children":2542},{},[2543],{"type":55,"value":2544},"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":85,"props":2546,"children":2548},{"id":2547},"monorepo",[2549],{"type":55,"value":2550},"Monorepo",{"type":46,"tag":51,"props":2552,"children":2553},{},[2554,2556,2563],{"type":55,"value":2555},"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":2557,"children":2560},{"href":2558,"rel":2559},"https://pnpm.io/",[74],[2561],{"type":55,"value":2562},"pnpm",{"type":55,"value":83},{"type":46,"tag":51,"props":2565,"children":2566},{},[2567],{"type":55,"value":2568},"After cloning the repo, run in the root folder.",{"type":46,"tag":112,"props":2570,"children":2574},{"className":2571,"code":2572,"language":2573,"meta":40,"style":40},"language-sh shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm i\npnpm run build\n","sh",[2575],{"type":46,"tag":77,"props":2576,"children":2577},{"__ignoreMap":40},[2578,2590],{"type":46,"tag":122,"props":2579,"children":2580},{"class":124,"line":125},[2581,2585],{"type":46,"tag":122,"props":2582,"children":2583},{"style":129},[2584],{"type":55,"value":2562},{"type":46,"tag":122,"props":2586,"children":2587},{"style":135},[2588],{"type":55,"value":2589}," i\n",{"type":46,"tag":122,"props":2591,"children":2592},{"class":124,"line":187},[2593,2597,2602],{"type":46,"tag":122,"props":2594,"children":2595},{"style":129},[2596],{"type":55,"value":2562},{"type":46,"tag":122,"props":2598,"children":2599},{"style":135},[2600],{"type":55,"value":2601}," run",{"type":46,"tag":122,"props":2603,"children":2604},{"style":135},[2605],{"type":55,"value":2606}," build\n",{"type":46,"tag":47,"props":2608,"children":2609},{},[2610],{"type":46,"tag":51,"props":2611,"children":2612},{},[2613,2615,2622,2624,2629],{"type":55,"value":2614},"Nuxt DevTools uses pnpm v7. If you are working on multiple projects with different versions of pnpm, it's recommended to enable ",{"type":46,"tag":58,"props":2616,"children":2619},{"href":2617,"rel":2618},"https://github.com/nodejs/corepack",[74],[2620],{"type":55,"value":2621},"Corepack",{"type":55,"value":2623}," by running ",{"type":46,"tag":77,"props":2625,"children":2626},{"className":40},[2627],{"type":55,"value":2628},"corepack enable",{"type":55,"value":83},{"type":46,"tag":85,"props":2631,"children":2633},{"id":2632},"packages",[2634],{"type":55,"value":2635},"Packages",{"type":46,"tag":51,"props":2637,"children":2638},{},[2639],{"type":55,"value":2640},"This repo contains the following packages:",{"type":46,"tag":2174,"props":2642,"children":2643},{},[2644,2653],{"type":46,"tag":2178,"props":2645,"children":2646},{},[2647,2651],{"type":46,"tag":77,"props":2648,"children":2649},{"className":40},[2650],{"type":55,"value":1069},{"type":55,"value":2652},": The Nuxt DevTools module",{"type":46,"tag":2178,"props":2654,"children":2655},{},[2656,2660],{"type":46,"tag":77,"props":2657,"children":2658},{"className":40},[2659],{"type":55,"value":218},{"type":55,"value":2661},": The UI Kit used by Nuxt DevTools and also for module authors to build UI for DevTools interation",{"type":46,"tag":105,"props":2663,"children":2664},{"id":2195},[2665],{"type":55,"value":2666},"DevTools",{"type":46,"tag":51,"props":2668,"children":2669},{},[2670,2672,2677,2679,2684],{"type":55,"value":2671},"Most of the scripts are forward to the root ",{"type":46,"tag":77,"props":2673,"children":2674},{"className":40},[2675],{"type":55,"value":2676},"package.json",{"type":55,"value":2678},". You can run ",{"type":46,"tag":77,"props":2680,"children":2681},{"className":40},[2682],{"type":55,"value":2683},"pnpm dev",{"type":55,"value":2685}," in the root folder to start the development server (Nuxt DevTools on top of it's own client UI).",{"type":46,"tag":51,"props":2687,"children":2688},{},[2689,2691,2696,2698,2702],{"type":55,"value":2690},"Or you can ",{"type":46,"tag":77,"props":2692,"children":2693},{"className":40},[2694],{"type":55,"value":2695},"cd packages/devtools",{"type":55,"value":2697}," and run ",{"type":46,"tag":77,"props":2699,"children":2700},{"className":40},[2701],{"type":55,"value":2683},{"type":55,"value":2703}," to start the development server.",{"type":46,"tag":105,"props":2705,"children":2707},{"id":2706},"ui-kit",[2708],{"type":55,"value":28},{"type":46,"tag":51,"props":2710,"children":2711},{},[2712,2714,2719,2720,2724],{"type":55,"value":2713},"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":2715,"children":2716},{"className":40},[2717],{"type":55,"value":2718},"cd packages/devtools-ui-kit",{"type":55,"value":2697},{"type":46,"tag":77,"props":2721,"children":2722},{"className":40},[2723],{"type":55,"value":2683},{"type":55,"value":2725}," to start the playground for the UI Kit.",{"type":46,"tag":85,"props":2727,"children":2729},{"id":2728},"trying-local-changes",[2730],{"type":55,"value":2731},"Trying Local Changes",{"type":46,"tag":51,"props":2733,"children":2734},{},[2735,2737,2742],{"type":55,"value":2736},"If you want to try your local changes in other Nuxt projects, you can use the ",{"type":46,"tag":77,"props":2738,"children":2739},{"className":40},[2740],{"type":55,"value":2741},"local.ts",{"type":55,"value":2743}," module under the root folder.",{"type":46,"tag":51,"props":2745,"children":2746},{},[2747,2749,2753],{"type":55,"value":2748},"Change ",{"type":46,"tag":77,"props":2750,"children":2751},{"className":40},[2752],{"type":55,"value":1069},{"type":55,"value":2754}," 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":2756,"children":2757},{},[2758,2760,2765,2767,2772],{"type":55,"value":2759},"For example, if you clone this repo to ",{"type":46,"tag":77,"props":2761,"children":2762},{"className":40},[2763],{"type":55,"value":2764},"/users/me/nuxt-devtools",{"type":55,"value":2766},", update your ",{"type":46,"tag":77,"props":2768,"children":2769},{"className":40},[2770],{"type":55,"value":2771},"nuxt.config.ts",{"type":55,"value":199},{"type":46,"tag":112,"props":2774,"children":2778},{"className":2775,"code":2776,"language":2777,"meta":40,"style":40},"language-diff shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: [\n-   '@nuxt/devtools',\n+   '/users/me/nuxt-devtools/local',\n  ]\n})\n","diff",[2779],{"type":46,"tag":77,"props":2780,"children":2781},{"__ignoreMap":40},[2782,2790,2798,2806,2819,2832,2839],{"type":46,"tag":122,"props":2783,"children":2784},{"class":124,"line":125},[2785],{"type":46,"tag":122,"props":2786,"children":2787},{"style":175},[2788],{"type":55,"value":2789},"// nuxt.config.ts\n",{"type":46,"tag":122,"props":2791,"children":2792},{"class":124,"line":187},[2793],{"type":46,"tag":122,"props":2794,"children":2795},{"style":175},[2796],{"type":55,"value":2797},"export default defineNuxtConfig({\n",{"type":46,"tag":122,"props":2799,"children":2800},{"class":124,"line":207},[2801],{"type":46,"tag":122,"props":2802,"children":2803},{"style":175},[2804],{"type":55,"value":2805},"  modules: [\n",{"type":46,"tag":122,"props":2807,"children":2808},{"class":124,"line":226},[2809,2814],{"type":46,"tag":122,"props":2810,"children":2811},{"style":181},[2812],{"type":55,"value":2813},"-",{"type":46,"tag":122,"props":2815,"children":2816},{"style":191},[2817],{"type":55,"value":2818},"   '@nuxt/devtools',\n",{"type":46,"tag":122,"props":2820,"children":2821},{"class":124,"line":235},[2822,2827],{"type":46,"tag":122,"props":2823,"children":2824},{"style":181},[2825],{"type":55,"value":2826},"+",{"type":46,"tag":122,"props":2828,"children":2829},{"style":135},[2830],{"type":55,"value":2831},"   '/users/me/nuxt-devtools/local',\n",{"type":46,"tag":122,"props":2833,"children":2834},{"class":124,"line":756},[2835],{"type":46,"tag":122,"props":2836,"children":2837},{"style":175},[2838],{"type":55,"value":232},{"type":46,"tag":122,"props":2840,"children":2841},{"class":124,"line":774},[2842],{"type":46,"tag":122,"props":2843,"children":2844},{"style":175},[2845],{"type":55,"value":2846},"})\n",{"type":46,"tag":51,"props":2848,"children":2849},{},[2850],{"type":55,"value":2851},"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":950,"props":2853,"children":2854},{},[2855],{"type":55,"value":954},{"title":40,"searchDepth":187,"depth":187,"links":2857},[2858,2859,2863],{"id":2547,"depth":187,"text":2550},{"id":2632,"depth":187,"text":2635,"children":2860},[2861,2862],{"id":2195,"depth":207,"text":2666},{"id":2706,"depth":207,"text":28},{"id":2728,"depth":187,"text":2731},"content:3.development:0.contributing.md","3.development/0.contributing.md",1702058987193]