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