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