[{"data":1,"prerenderedAt":4920},["Reactive",2],{"navigation":3,"docs-/module/utils-kit":37,"docs-/module/utils-kit-surround":1634},[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":26,"_dir":38,"_draft":39,"_partial":39,"_locale":40,"title":25,"description":41,"body":42,"_type":1629,"_id":1630,"_source":1631,"_file":1632,"_extension":1633},"module",false,"","Utility kit for easier DevTools integrations.",{"type":43,"children":44,"toc":1617},"root",[45,61,94,149,167,176,186,197,509,518,530,539,551,901,949,958,963,1113,1126,1135,1140,1145,1221,1240,1248,1267,1276,1301,1310,1315,1423,1432,1443,1611],{"type":46,"tag":47,"props":48,"children":49},"element","p",{},[50,53,59],{"type":51,"value":52},"text","Since v0.3.0, we are now providing a utility kit for easier DevTools integrations, similar to ",{"type":46,"tag":54,"props":55,"children":56},"code",{"className":40},[57],{"type":51,"value":58},"@nuxt/kit",{"type":51,"value":60},".",{"type":46,"tag":62,"props":63,"children":67},"pre",{"className":64,"code":65,"language":66,"meta":40,"style":40},"language-bash shiki shiki-themes material-theme material-theme-palenight material-theme-lighter","npm i @nuxt/devtools-kit\n","bash",[68],{"type":46,"tag":54,"props":69,"children":70},{"__ignoreMap":40},[71],{"type":46,"tag":72,"props":73,"children":76},"span",{"class":74,"line":75},"line",1,[77,83,89],{"type":46,"tag":72,"props":78,"children":80},{"style":79},"color:#FFCB6B;--shiki-dark:#FFCB6B;--shiki-light:#E2931D",[81],{"type":51,"value":82},"npm",{"type":46,"tag":72,"props":84,"children":86},{"style":85},"color:#C3E88D;--shiki-dark:#C3E88D;--shiki-light:#91B859",[87],{"type":51,"value":88}," i",{"type":46,"tag":72,"props":90,"children":91},{"style":85},[92],{"type":51,"value":93}," @nuxt/devtools-kit",{"type":46,"tag":62,"props":95,"children":99},{"className":96,"code":97,"language":98,"meta":40,"style":40},"language-ts shiki shiki-themes material-theme material-theme-palenight material-theme-lighter","import { addCustomTab } from '@nuxt/devtools-kit'\n","ts",[100],{"type":46,"tag":54,"props":101,"children":102},{"__ignoreMap":40},[103],{"type":46,"tag":72,"props":104,"children":105},{"class":74,"line":75},[106,112,118,124,129,134,139,144],{"type":46,"tag":72,"props":107,"children":109},{"style":108},"color:#89DDFF;--shiki-dark:#89DDFF;--shiki-light:#39ADB5;font-style:italic;--shiki-dark-font-style:italic;--shiki-light-font-style:italic",[110],{"type":51,"value":111},"import",{"type":46,"tag":72,"props":113,"children":115},{"style":114},"color:#89DDFF;--shiki-dark:#89DDFF;--shiki-light:#39ADB5",[116],{"type":51,"value":117}," {",{"type":46,"tag":72,"props":119,"children":121},{"style":120},"color:#EEFFFF;--shiki-dark:#BABED8;--shiki-light:#90A4AE",[122],{"type":51,"value":123}," addCustomTab",{"type":46,"tag":72,"props":125,"children":126},{"style":114},[127],{"type":51,"value":128}," }",{"type":46,"tag":72,"props":130,"children":131},{"style":108},[132],{"type":51,"value":133}," from",{"type":46,"tag":72,"props":135,"children":136},{"style":114},[137],{"type":51,"value":138}," '",{"type":46,"tag":72,"props":140,"children":141},{"style":85},[142],{"type":51,"value":143},"@nuxt/devtools-kit",{"type":46,"tag":72,"props":145,"children":146},{"style":114},[147],{"type":51,"value":148},"'",{"type":46,"tag":47,"props":150,"children":151},{},[152,154,158,160,165],{"type":51,"value":153},"We recommend module authors to install ",{"type":46,"tag":54,"props":155,"children":156},{"className":40},[157],{"type":51,"value":143},{"type":51,"value":159}," as a dependency and ",{"type":46,"tag":54,"props":161,"children":162},{"className":40},[163],{"type":51,"value":164},"@nuxt/devtools",{"type":51,"value":166}," as a dev dependency.",{"type":46,"tag":168,"props":169,"children":171},"h2",{"id":170},"nuxtdevtools-kit",[172],{"type":46,"tag":54,"props":173,"children":174},{"className":40},[175],{"type":51,"value":143},{"type":46,"tag":177,"props":178,"children":180},"h3",{"id":179},"addcustomtab",[181],{"type":46,"tag":54,"props":182,"children":183},{"className":40},[184],{"type":51,"value":185},"addCustomTab()",{"type":46,"tag":47,"props":187,"children":188},{},[189,191,196],{"type":51,"value":190},"A shorthand for calling the hook ",{"type":46,"tag":54,"props":192,"children":193},{"className":40},[194],{"type":51,"value":195},"devtools:customTabs",{"type":51,"value":60},{"type":46,"tag":62,"props":198,"children":200},{"className":96,"code":199,"language":98,"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",[201],{"type":46,"tag":54,"props":202,"children":203},{"__ignoreMap":40},[204,239,243,279,289,322,331,361,370,400,409,426,456,486,495],{"type":46,"tag":72,"props":205,"children":206},{"class":74,"line":75},[207,211,215,219,223,227,231,235],{"type":46,"tag":72,"props":208,"children":209},{"style":108},[210],{"type":51,"value":111},{"type":46,"tag":72,"props":212,"children":213},{"style":114},[214],{"type":51,"value":117},{"type":46,"tag":72,"props":216,"children":217},{"style":120},[218],{"type":51,"value":123},{"type":46,"tag":72,"props":220,"children":221},{"style":114},[222],{"type":51,"value":128},{"type":46,"tag":72,"props":224,"children":225},{"style":108},[226],{"type":51,"value":133},{"type":46,"tag":72,"props":228,"children":229},{"style":114},[230],{"type":51,"value":138},{"type":46,"tag":72,"props":232,"children":233},{"style":85},[234],{"type":51,"value":143},{"type":46,"tag":72,"props":236,"children":237},{"style":114},[238],{"type":51,"value":148},{"type":46,"tag":72,"props":240,"children":242},{"class":74,"line":241},2,[],{"type":46,"tag":72,"props":244,"children":246},{"class":74,"line":245},3,[247,253,258,263,269,274],{"type":46,"tag":72,"props":248,"children":250},{"style":249},"color:#82AAFF;--shiki-dark:#82AAFF;--shiki-light:#6182B8",[251],{"type":51,"value":252},"addCustomTab",{"type":46,"tag":72,"props":254,"children":255},{"style":120},[256],{"type":51,"value":257},"(",{"type":46,"tag":72,"props":259,"children":260},{"style":114},[261],{"type":51,"value":262},"()",{"type":46,"tag":72,"props":264,"children":266},{"style":265},"color:#C792EA;--shiki-dark:#C792EA;--shiki-light:#9C3EDA",[267],{"type":51,"value":268}," =>",{"type":46,"tag":72,"props":270,"children":271},{"style":120},[272],{"type":51,"value":273}," (",{"type":46,"tag":72,"props":275,"children":276},{"style":114},[277],{"type":51,"value":278},"{",{"type":46,"tag":72,"props":280,"children":282},{"class":74,"line":281},4,[283],{"type":46,"tag":72,"props":284,"children":286},{"style":285},"color:#546E7A;--shiki-dark:#676E95;--shiki-light:#90A4AE;font-style:italic;--shiki-dark-font-style:italic;--shiki-light-font-style:italic",[287],{"type":51,"value":288}," // unique identifier",{"type":46,"tag":72,"props":290,"children":292},{"class":74,"line":291},5,[293,299,304,308,313,317],{"type":46,"tag":72,"props":294,"children":296},{"style":295},"color:#F07178;--shiki-dark:#F07178;--shiki-light:#E53935",[297],{"type":51,"value":298}," name",{"type":46,"tag":72,"props":300,"children":301},{"style":114},[302],{"type":51,"value":303},":",{"type":46,"tag":72,"props":305,"children":306},{"style":114},[307],{"type":51,"value":138},{"type":46,"tag":72,"props":309,"children":310},{"style":85},[311],{"type":51,"value":312},"my-module",{"type":46,"tag":72,"props":314,"children":315},{"style":114},[316],{"type":51,"value":148},{"type":46,"tag":72,"props":318,"children":319},{"style":114},[320],{"type":51,"value":321},",",{"type":46,"tag":72,"props":323,"children":325},{"class":74,"line":324},6,[326],{"type":46,"tag":72,"props":327,"children":328},{"style":285},[329],{"type":51,"value":330}," // title to display in the tab",{"type":46,"tag":72,"props":332,"children":334},{"class":74,"line":333},7,[335,340,344,348,353,357],{"type":46,"tag":72,"props":336,"children":337},{"style":295},[338],{"type":51,"value":339}," title",{"type":46,"tag":72,"props":341,"children":342},{"style":114},[343],{"type":51,"value":303},{"type":46,"tag":72,"props":345,"children":346},{"style":114},[347],{"type":51,"value":138},{"type":46,"tag":72,"props":349,"children":350},{"style":85},[351],{"type":51,"value":352},"My Module",{"type":46,"tag":72,"props":354,"children":355},{"style":114},[356],{"type":51,"value":148},{"type":46,"tag":72,"props":358,"children":359},{"style":114},[360],{"type":51,"value":321},{"type":46,"tag":72,"props":362,"children":364},{"class":74,"line":363},8,[365],{"type":46,"tag":72,"props":366,"children":367},{"style":285},[368],{"type":51,"value":369}," // any icon from Iconify, or a URL to an image",{"type":46,"tag":72,"props":371,"children":373},{"class":74,"line":372},9,[374,379,383,387,392,396],{"type":46,"tag":72,"props":375,"children":376},{"style":295},[377],{"type":51,"value":378}," icon",{"type":46,"tag":72,"props":380,"children":381},{"style":114},[382],{"type":51,"value":303},{"type":46,"tag":72,"props":384,"children":385},{"style":114},[386],{"type":51,"value":138},{"type":46,"tag":72,"props":388,"children":389},{"style":85},[390],{"type":51,"value":391},"carbon:apps",{"type":46,"tag":72,"props":393,"children":394},{"style":114},[395],{"type":51,"value":148},{"type":46,"tag":72,"props":397,"children":398},{"style":114},[399],{"type":51,"value":321},{"type":46,"tag":72,"props":401,"children":403},{"class":74,"line":402},10,[404],{"type":46,"tag":72,"props":405,"children":406},{"style":285},[407],{"type":51,"value":408}," // iframe view",{"type":46,"tag":72,"props":410,"children":412},{"class":74,"line":411},11,[413,418,422],{"type":46,"tag":72,"props":414,"children":415},{"style":295},[416],{"type":51,"value":417}," view",{"type":46,"tag":72,"props":419,"children":420},{"style":114},[421],{"type":51,"value":303},{"type":46,"tag":72,"props":423,"children":424},{"style":114},[425],{"type":51,"value":117},{"type":46,"tag":72,"props":427,"children":429},{"class":74,"line":428},12,[430,435,439,443,448,452],{"type":46,"tag":72,"props":431,"children":432},{"style":295},[433],{"type":51,"value":434}," type",{"type":46,"tag":72,"props":436,"children":437},{"style":114},[438],{"type":51,"value":303},{"type":46,"tag":72,"props":440,"children":441},{"style":114},[442],{"type":51,"value":138},{"type":46,"tag":72,"props":444,"children":445},{"style":85},[446],{"type":51,"value":447},"iframe",{"type":46,"tag":72,"props":449,"children":450},{"style":114},[451],{"type":51,"value":148},{"type":46,"tag":72,"props":453,"children":454},{"style":114},[455],{"type":51,"value":321},{"type":46,"tag":72,"props":457,"children":459},{"class":74,"line":458},13,[460,465,469,473,478,482],{"type":46,"tag":72,"props":461,"children":462},{"style":295},[463],{"type":51,"value":464}," src",{"type":46,"tag":72,"props":466,"children":467},{"style":114},[468],{"type":51,"value":303},{"type":46,"tag":72,"props":470,"children":471},{"style":114},[472],{"type":51,"value":138},{"type":46,"tag":72,"props":474,"children":475},{"style":85},[476],{"type":51,"value":477},"/url-to-your-module-view",{"type":46,"tag":72,"props":479,"children":480},{"style":114},[481],{"type":51,"value":148},{"type":46,"tag":72,"props":483,"children":484},{"style":114},[485],{"type":51,"value":321},{"type":46,"tag":72,"props":487,"children":489},{"class":74,"line":488},14,[490],{"type":46,"tag":72,"props":491,"children":492},{"style":114},[493],{"type":51,"value":494}," },",{"type":46,"tag":72,"props":496,"children":498},{"class":74,"line":497},15,[499,504],{"type":46,"tag":72,"props":500,"children":501},{"style":114},[502],{"type":51,"value":503},"}",{"type":46,"tag":72,"props":505,"children":506},{"style":120},[507],{"type":51,"value":508},"))",{"type":46,"tag":177,"props":510,"children":512},{"id":511},"refreshcustomtabs",[513],{"type":46,"tag":54,"props":514,"children":515},{"className":40},[516],{"type":51,"value":517},"refreshCustomTabs()",{"type":46,"tag":47,"props":519,"children":520},{},[521,523,528],{"type":51,"value":522},"A shorthand for call hook ",{"type":46,"tag":54,"props":524,"children":525},{"className":40},[526],{"type":51,"value":527},"devtools:customTabs:refresh",{"type":51,"value":529},". It will refresh all custom tabs.",{"type":46,"tag":177,"props":531,"children":533},{"id":532},"startsubprocess",[534],{"type":46,"tag":54,"props":535,"children":536},{"className":40},[537],{"type":51,"value":538},"startSubprocess()",{"type":46,"tag":47,"props":540,"children":541},{},[542,544,549],{"type":51,"value":543},"Start a sub process using ",{"type":46,"tag":54,"props":545,"children":546},{"className":40},[547],{"type":51,"value":548},"execa",{"type":51,"value":550}," and create a terminal tab in DevTools.",{"type":46,"tag":62,"props":552,"children":554},{"className":96,"code":553,"language":98,"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",[555],{"type":46,"tag":54,"props":556,"children":557},{"__ignoreMap":40},[558,594,597,623,631,660,677,698,718,738,770,782,789,796,825,854,884,892],{"type":46,"tag":72,"props":559,"children":560},{"class":74,"line":75},[561,565,569,574,578,582,586,590],{"type":46,"tag":72,"props":562,"children":563},{"style":108},[564],{"type":51,"value":111},{"type":46,"tag":72,"props":566,"children":567},{"style":114},[568],{"type":51,"value":117},{"type":46,"tag":72,"props":570,"children":571},{"style":120},[572],{"type":51,"value":573}," startSubprocess",{"type":46,"tag":72,"props":575,"children":576},{"style":114},[577],{"type":51,"value":128},{"type":46,"tag":72,"props":579,"children":580},{"style":108},[581],{"type":51,"value":133},{"type":46,"tag":72,"props":583,"children":584},{"style":114},[585],{"type":51,"value":138},{"type":46,"tag":72,"props":587,"children":588},{"style":85},[589],{"type":51,"value":143},{"type":46,"tag":72,"props":591,"children":592},{"style":114},[593],{"type":51,"value":148},{"type":46,"tag":72,"props":595,"children":596},{"class":74,"line":241},[],{"type":46,"tag":72,"props":598,"children":599},{"class":74,"line":245},[600,605,610,615,619],{"type":46,"tag":72,"props":601,"children":602},{"style":265},[603],{"type":51,"value":604},"const",{"type":46,"tag":72,"props":606,"children":607},{"style":120},[608],{"type":51,"value":609}," subprocess ",{"type":46,"tag":72,"props":611,"children":612},{"style":114},[613],{"type":51,"value":614},"=",{"type":46,"tag":72,"props":616,"children":617},{"style":249},[618],{"type":51,"value":573},{"type":46,"tag":72,"props":620,"children":621},{"style":120},[622],{"type":51,"value":257},{"type":46,"tag":72,"props":624,"children":625},{"class":74,"line":281},[626],{"type":46,"tag":72,"props":627,"children":628},{"style":114},[629],{"type":51,"value":630}," {",{"type":46,"tag":72,"props":632,"children":633},{"class":74,"line":291},[634,639,643,647,652,656],{"type":46,"tag":72,"props":635,"children":636},{"style":295},[637],{"type":51,"value":638}," command",{"type":46,"tag":72,"props":640,"children":641},{"style":114},[642],{"type":51,"value":303},{"type":46,"tag":72,"props":644,"children":645},{"style":114},[646],{"type":51,"value":138},{"type":46,"tag":72,"props":648,"children":649},{"style":85},[650],{"type":51,"value":651},"code-server",{"type":46,"tag":72,"props":653,"children":654},{"style":114},[655],{"type":51,"value":148},{"type":46,"tag":72,"props":657,"children":658},{"style":114},[659],{"type":51,"value":321},{"type":46,"tag":72,"props":661,"children":662},{"class":74,"line":324},[663,668,672],{"type":46,"tag":72,"props":664,"children":665},{"style":295},[666],{"type":51,"value":667}," args",{"type":46,"tag":72,"props":669,"children":670},{"style":114},[671],{"type":51,"value":303},{"type":46,"tag":72,"props":673,"children":674},{"style":120},[675],{"type":51,"value":676}," [",{"type":46,"tag":72,"props":678,"children":679},{"class":74,"line":333},[680,685,690,694],{"type":46,"tag":72,"props":681,"children":682},{"style":114},[683],{"type":51,"value":684}," '",{"type":46,"tag":72,"props":686,"children":687},{"style":85},[688],{"type":51,"value":689},"serve-local",{"type":46,"tag":72,"props":691,"children":692},{"style":114},[693],{"type":51,"value":148},{"type":46,"tag":72,"props":695,"children":696},{"style":114},[697],{"type":51,"value":321},{"type":46,"tag":72,"props":699,"children":700},{"class":74,"line":363},[701,705,710,714],{"type":46,"tag":72,"props":702,"children":703},{"style":114},[704],{"type":51,"value":684},{"type":46,"tag":72,"props":706,"children":707},{"style":85},[708],{"type":51,"value":709},"--accept-server-license-terms",{"type":46,"tag":72,"props":711,"children":712},{"style":114},[713],{"type":51,"value":148},{"type":46,"tag":72,"props":715,"children":716},{"style":114},[717],{"type":51,"value":321},{"type":46,"tag":72,"props":719,"children":720},{"class":74,"line":372},[721,725,730,734],{"type":46,"tag":72,"props":722,"children":723},{"style":114},[724],{"type":51,"value":684},{"type":46,"tag":72,"props":726,"children":727},{"style":85},[728],{"type":51,"value":729},"--without-connection-token",{"type":46,"tag":72,"props":731,"children":732},{"style":114},[733],{"type":51,"value":148},{"type":46,"tag":72,"props":735,"children":736},{"style":114},[737],{"type":51,"value":321},{"type":46,"tag":72,"props":739,"children":740},{"class":74,"line":402},[741,746,751,756,761,766],{"type":46,"tag":72,"props":742,"children":743},{"style":114},[744],{"type":51,"value":745}," `",{"type":46,"tag":72,"props":747,"children":748},{"style":85},[749],{"type":51,"value":750},"--port=",{"type":46,"tag":72,"props":752,"children":753},{"style":114},[754],{"type":51,"value":755},"${",{"type":46,"tag":72,"props":757,"children":758},{"style":120},[759],{"type":51,"value":760},"port",{"type":46,"tag":72,"props":762,"children":763},{"style":114},[764],{"type":51,"value":765},"}`",{"type":46,"tag":72,"props":767,"children":768},{"style":114},[769],{"type":51,"value":321},{"type":46,"tag":72,"props":771,"children":772},{"class":74,"line":411},[773,778],{"type":46,"tag":72,"props":774,"children":775},{"style":120},[776],{"type":51,"value":777}," ]",{"type":46,"tag":72,"props":779,"children":780},{"style":114},[781],{"type":51,"value":321},{"type":46,"tag":72,"props":783,"children":784},{"class":74,"line":428},[785],{"type":46,"tag":72,"props":786,"children":787},{"style":114},[788],{"type":51,"value":494},{"type":46,"tag":72,"props":790,"children":791},{"class":74,"line":458},[792],{"type":46,"tag":72,"props":793,"children":794},{"style":114},[795],{"type":51,"value":630},{"type":46,"tag":72,"props":797,"children":798},{"class":74,"line":488},[799,804,808,812,817,821],{"type":46,"tag":72,"props":800,"children":801},{"style":295},[802],{"type":51,"value":803}," id",{"type":46,"tag":72,"props":805,"children":806},{"style":114},[807],{"type":51,"value":303},{"type":46,"tag":72,"props":809,"children":810},{"style":114},[811],{"type":51,"value":138},{"type":46,"tag":72,"props":813,"children":814},{"style":85},[815],{"type":51,"value":816},"devtools:vscode",{"type":46,"tag":72,"props":818,"children":819},{"style":114},[820],{"type":51,"value":148},{"type":46,"tag":72,"props":822,"children":823},{"style":114},[824],{"type":51,"value":321},{"type":46,"tag":72,"props":826,"children":827},{"class":74,"line":497},[828,833,837,841,846,850],{"type":46,"tag":72,"props":829,"children":830},{"style":295},[831],{"type":51,"value":832}," name",{"type":46,"tag":72,"props":834,"children":835},{"style":114},[836],{"type":51,"value":303},{"type":46,"tag":72,"props":838,"children":839},{"style":114},[840],{"type":51,"value":138},{"type":46,"tag":72,"props":842,"children":843},{"style":85},[844],{"type":51,"value":845},"VS Code Server",{"type":46,"tag":72,"props":847,"children":848},{"style":114},[849],{"type":51,"value":148},{"type":46,"tag":72,"props":851,"children":852},{"style":114},[853],{"type":51,"value":321},{"type":46,"tag":72,"props":855,"children":857},{"class":74,"line":856},16,[858,863,867,871,876,880],{"type":46,"tag":72,"props":859,"children":860},{"style":295},[861],{"type":51,"value":862}," icon",{"type":46,"tag":72,"props":864,"children":865},{"style":114},[866],{"type":51,"value":303},{"type":46,"tag":72,"props":868,"children":869},{"style":114},[870],{"type":51,"value":138},{"type":46,"tag":72,"props":872,"children":873},{"style":85},[874],{"type":51,"value":875},"logos-visual-studio-code",{"type":46,"tag":72,"props":877,"children":878},{"style":114},[879],{"type":51,"value":148},{"type":46,"tag":72,"props":881,"children":882},{"style":114},[883],{"type":51,"value":321},{"type":46,"tag":72,"props":885,"children":887},{"class":74,"line":886},17,[888],{"type":46,"tag":72,"props":889,"children":890},{"style":114},[891],{"type":51,"value":494},{"type":46,"tag":72,"props":893,"children":895},{"class":74,"line":894},18,[896],{"type":46,"tag":72,"props":897,"children":898},{"style":120},[899],{"type":51,"value":900},")",{"type":46,"tag":62,"props":902,"children":904},{"className":96,"code":903,"language":98,"meta":40,"style":40},"subprocess.restart()\nsubprocess.terminate()\n",[905],{"type":46,"tag":54,"props":906,"children":907},{"__ignoreMap":40},[908,929],{"type":46,"tag":72,"props":909,"children":910},{"class":74,"line":75},[911,916,920,925],{"type":46,"tag":72,"props":912,"children":913},{"style":120},[914],{"type":51,"value":915},"subprocess",{"type":46,"tag":72,"props":917,"children":918},{"style":114},[919],{"type":51,"value":60},{"type":46,"tag":72,"props":921,"children":922},{"style":249},[923],{"type":51,"value":924},"restart",{"type":46,"tag":72,"props":926,"children":927},{"style":120},[928],{"type":51,"value":262},{"type":46,"tag":72,"props":930,"children":931},{"class":74,"line":241},[932,936,940,945],{"type":46,"tag":72,"props":933,"children":934},{"style":120},[935],{"type":51,"value":915},{"type":46,"tag":72,"props":937,"children":938},{"style":114},[939],{"type":51,"value":60},{"type":46,"tag":72,"props":941,"children":942},{"style":249},[943],{"type":51,"value":944},"terminate",{"type":46,"tag":72,"props":946,"children":947},{"style":120},[948],{"type":51,"value":262},{"type":46,"tag":177,"props":950,"children":952},{"id":951},"extendserverrpc",[953],{"type":46,"tag":54,"props":954,"children":955},{"className":40},[956],{"type":51,"value":957},"extendServerRpc()",{"type":46,"tag":47,"props":959,"children":960},{},[961],{"type":51,"value":962},"Extend the server RPC with your own methods.",{"type":46,"tag":62,"props":964,"children":966},{"className":96,"code":965,"language":98,"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",[967],{"type":46,"tag":54,"props":968,"children":969},{"__ignoreMap":40},[970,1006,1009,1053,1074,1095,1102],{"type":46,"tag":72,"props":971,"children":972},{"class":74,"line":75},[973,977,981,986,990,994,998,1002],{"type":46,"tag":72,"props":974,"children":975},{"style":108},[976],{"type":51,"value":111},{"type":46,"tag":72,"props":978,"children":979},{"style":114},[980],{"type":51,"value":117},{"type":46,"tag":72,"props":982,"children":983},{"style":120},[984],{"type":51,"value":985}," extendServerRpc",{"type":46,"tag":72,"props":987,"children":988},{"style":114},[989],{"type":51,"value":128},{"type":46,"tag":72,"props":991,"children":992},{"style":108},[993],{"type":51,"value":133},{"type":46,"tag":72,"props":995,"children":996},{"style":114},[997],{"type":51,"value":138},{"type":46,"tag":72,"props":999,"children":1000},{"style":85},[1001],{"type":51,"value":143},{"type":46,"tag":72,"props":1003,"children":1004},{"style":114},[1005],{"type":51,"value":148},{"type":46,"tag":72,"props":1007,"children":1008},{"class":74,"line":241},[],{"type":46,"tag":72,"props":1010,"children":1011},{"class":74,"line":245},[1012,1016,1021,1025,1029,1033,1037,1041,1045,1049],{"type":46,"tag":72,"props":1013,"children":1014},{"style":265},[1015],{"type":51,"value":604},{"type":46,"tag":72,"props":1017,"children":1018},{"style":120},[1019],{"type":51,"value":1020}," rpc ",{"type":46,"tag":72,"props":1022,"children":1023},{"style":114},[1024],{"type":51,"value":614},{"type":46,"tag":72,"props":1026,"children":1027},{"style":249},[1028],{"type":51,"value":985},{"type":46,"tag":72,"props":1030,"children":1031},{"style":120},[1032],{"type":51,"value":257},{"type":46,"tag":72,"props":1034,"children":1035},{"style":114},[1036],{"type":51,"value":148},{"type":46,"tag":72,"props":1038,"children":1039},{"style":85},[1040],{"type":51,"value":312},{"type":46,"tag":72,"props":1042,"children":1043},{"style":114},[1044],{"type":51,"value":148},{"type":46,"tag":72,"props":1046,"children":1047},{"style":114},[1048],{"type":51,"value":321},{"type":46,"tag":72,"props":1050,"children":1051},{"style":114},[1052],{"type":51,"value":117},{"type":46,"tag":72,"props":1054,"children":1055},{"class":74,"line":281},[1056,1061,1066,1070],{"type":46,"tag":72,"props":1057,"children":1058},{"style":265},[1059],{"type":51,"value":1060}," async",{"type":46,"tag":72,"props":1062,"children":1063},{"style":295},[1064],{"type":51,"value":1065}," myMethod",{"type":46,"tag":72,"props":1067,"children":1068},{"style":114},[1069],{"type":51,"value":262},{"type":46,"tag":72,"props":1071,"children":1072},{"style":114},[1073],{"type":51,"value":117},{"type":46,"tag":72,"props":1075,"children":1076},{"class":74,"line":291},[1077,1082,1086,1091],{"type":46,"tag":72,"props":1078,"children":1079},{"style":108},[1080],{"type":51,"value":1081}," return",{"type":46,"tag":72,"props":1083,"children":1084},{"style":114},[1085],{"type":51,"value":138},{"type":46,"tag":72,"props":1087,"children":1088},{"style":85},[1089],{"type":51,"value":1090},"hello",{"type":46,"tag":72,"props":1092,"children":1093},{"style":114},[1094],{"type":51,"value":148},{"type":46,"tag":72,"props":1096,"children":1097},{"class":74,"line":324},[1098],{"type":46,"tag":72,"props":1099,"children":1100},{"style":114},[1101],{"type":51,"value":494},{"type":46,"tag":72,"props":1103,"children":1104},{"class":74,"line":333},[1105,1109],{"type":46,"tag":72,"props":1106,"children":1107},{"style":114},[1108],{"type":51,"value":503},{"type":46,"tag":72,"props":1110,"children":1111},{"style":120},[1112],{"type":51,"value":900},{"type":46,"tag":47,"props":1114,"children":1115},{},[1116,1118,1125],{"type":51,"value":1117},"Learn more about ",{"type":46,"tag":1119,"props":1120,"children":1122},"a",{"href":1121},"/module/guide#custom-rpc-functions",[1123],{"type":51,"value":1124},"Custom RPC functions",{"type":51,"value":60},{"type":46,"tag":168,"props":1127,"children":1129},{"id":1128},"nuxtdevtools-kitiframe-client",[1130],{"type":46,"tag":54,"props":1131,"children":1132},{"className":40},[1133],{"type":51,"value":1134},"@nuxt/devtools-kit/iframe-client",{"type":46,"tag":47,"props":1136,"children":1137},{},[1138],{"type":51,"value":1139},"To provide complex interactions for your module integrations, we recommend to host your own view and display it in devtools via iframe.",{"type":46,"tag":47,"props":1141,"children":1142},{},[1143],{"type":51,"value":1144},"To get the infomation from the devtools and the client app, you can do this in your client app:",{"type":46,"tag":62,"props":1146,"children":1148},{"className":96,"code":1147,"language":98,"meta":40,"style":40},"import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'\n\nexport const devtoolsClient = useDevtoolsClient()\n",[1149],{"type":46,"tag":54,"props":1150,"children":1151},{"__ignoreMap":40},[1152,1188,1191],{"type":46,"tag":72,"props":1153,"children":1154},{"class":74,"line":75},[1155,1159,1163,1168,1172,1176,1180,1184],{"type":46,"tag":72,"props":1156,"children":1157},{"style":108},[1158],{"type":51,"value":111},{"type":46,"tag":72,"props":1160,"children":1161},{"style":114},[1162],{"type":51,"value":117},{"type":46,"tag":72,"props":1164,"children":1165},{"style":120},[1166],{"type":51,"value":1167}," useDevtoolsClient",{"type":46,"tag":72,"props":1169,"children":1170},{"style":114},[1171],{"type":51,"value":128},{"type":46,"tag":72,"props":1173,"children":1174},{"style":108},[1175],{"type":51,"value":133},{"type":46,"tag":72,"props":1177,"children":1178},{"style":114},[1179],{"type":51,"value":138},{"type":46,"tag":72,"props":1181,"children":1182},{"style":85},[1183],{"type":51,"value":1134},{"type":46,"tag":72,"props":1185,"children":1186},{"style":114},[1187],{"type":51,"value":148},{"type":46,"tag":72,"props":1189,"children":1190},{"class":74,"line":241},[],{"type":46,"tag":72,"props":1192,"children":1193},{"class":74,"line":245},[1194,1199,1204,1209,1213,1217],{"type":46,"tag":72,"props":1195,"children":1196},{"style":108},[1197],{"type":51,"value":1198},"export",{"type":46,"tag":72,"props":1200,"children":1201},{"style":265},[1202],{"type":51,"value":1203}," const",{"type":46,"tag":72,"props":1205,"children":1206},{"style":120},[1207],{"type":51,"value":1208}," devtoolsClient ",{"type":46,"tag":72,"props":1210,"children":1211},{"style":114},[1212],{"type":51,"value":614},{"type":46,"tag":72,"props":1214,"children":1215},{"style":249},[1216],{"type":51,"value":1167},{"type":46,"tag":72,"props":1218,"children":1219},{"style":120},[1220],{"type":51,"value":262},{"type":46,"tag":47,"props":1222,"children":1223},{},[1224,1226,1231,1233,1238],{"type":51,"value":1225},"When the iframe been served with the same origin (CORS limitation), devtools will automatically inject ",{"type":46,"tag":54,"props":1227,"children":1228},{"className":40},[1229],{"type":51,"value":1230},"__NUXT_DEVTOOLS__",{"type":51,"value":1232}," to the iframe's window object. You can access it as a ref using ",{"type":46,"tag":54,"props":1234,"children":1235},{"className":40},[1236],{"type":51,"value":1237},"useDevtoolsClient()",{"type":51,"value":1239}," utility.",{"type":46,"tag":177,"props":1241,"children":1243},{"id":1242},"usedevtoolsclient",[1244],{"type":46,"tag":54,"props":1245,"children":1246},{"className":40},[1247],{"type":51,"value":1237},{"type":46,"tag":47,"props":1249,"children":1250},{},[1251,1253,1258,1260,1265],{"type":51,"value":1252},"It will return a ref of ",{"type":46,"tag":54,"props":1254,"children":1255},{"className":40},[1256],{"type":51,"value":1257},"NuxtDevtoolsIframeClient",{"type":51,"value":1259}," object that are intially ",{"type":46,"tag":54,"props":1261,"children":1262},{"className":40},[1263],{"type":51,"value":1264},"null",{"type":51,"value":1266}," and will be updated when the connection is ready.",{"type":46,"tag":47,"props":1268,"children":1269},{},[1270,1274],{"type":46,"tag":54,"props":1271,"children":1272},{"className":40},[1273],{"type":51,"value":1257},{"type":51,"value":1275}," contains two properties:",{"type":46,"tag":1277,"props":1278,"children":1279},"ul",{},[1280,1291],{"type":46,"tag":1281,"props":1282,"children":1283},"li",{},[1284,1289],{"type":46,"tag":54,"props":1285,"children":1286},{"className":40},[1287],{"type":51,"value":1288},"host",{"type":51,"value":1290},": APIs to communicate with the client app",{"type":46,"tag":1281,"props":1292,"children":1293},{},[1294,1299],{"type":46,"tag":54,"props":1295,"children":1296},{"className":40},[1297],{"type":51,"value":1298},"devtools",{"type":51,"value":1300},": APIs to communicate with the devtools",{"type":46,"tag":47,"props":1302,"children":1303},{},[1304,1308],{"type":46,"tag":54,"props":1305,"children":1306},{"className":40},[1307],{"type":51,"value":1288},{"type":51,"value":1309}," can be undefined when devtools are accessed standalone or from a different origin.",{"type":46,"tag":47,"props":1311,"children":1312},{},[1313],{"type":51,"value":1314},"For example, you can get the router instance from the client app:",{"type":46,"tag":62,"props":1316,"children":1318},{"className":96,"code":1317,"language":98,"meta":40,"style":40},"const router = computed(() => devtoolsClient.value?.host?.nuxt.vueApp.config.globalProperties?.$router)\n",[1319],{"type":46,"tag":54,"props":1320,"children":1321},{"__ignoreMap":40},[1322],{"type":46,"tag":72,"props":1323,"children":1324},{"class":74,"line":75},[1325,1329,1334,1338,1343,1347,1351,1355,1360,1364,1369,1374,1378,1382,1387,1391,1396,1400,1405,1409,1414,1418],{"type":46,"tag":72,"props":1326,"children":1327},{"style":265},[1328],{"type":51,"value":604},{"type":46,"tag":72,"props":1330,"children":1331},{"style":120},[1332],{"type":51,"value":1333}," router ",{"type":46,"tag":72,"props":1335,"children":1336},{"style":114},[1337],{"type":51,"value":614},{"type":46,"tag":72,"props":1339,"children":1340},{"style":249},[1341],{"type":51,"value":1342}," computed",{"type":46,"tag":72,"props":1344,"children":1345},{"style":120},[1346],{"type":51,"value":257},{"type":46,"tag":72,"props":1348,"children":1349},{"style":114},[1350],{"type":51,"value":262},{"type":46,"tag":72,"props":1352,"children":1353},{"style":265},[1354],{"type":51,"value":268},{"type":46,"tag":72,"props":1356,"children":1357},{"style":120},[1358],{"type":51,"value":1359}," devtoolsClient",{"type":46,"tag":72,"props":1361,"children":1362},{"style":114},[1363],{"type":51,"value":60},{"type":46,"tag":72,"props":1365,"children":1366},{"style":120},[1367],{"type":51,"value":1368},"value",{"type":46,"tag":72,"props":1370,"children":1371},{"style":114},[1372],{"type":51,"value":1373},"?.",{"type":46,"tag":72,"props":1375,"children":1376},{"style":120},[1377],{"type":51,"value":1288},{"type":46,"tag":72,"props":1379,"children":1380},{"style":114},[1381],{"type":51,"value":1373},{"type":46,"tag":72,"props":1383,"children":1384},{"style":120},[1385],{"type":51,"value":1386},"nuxt",{"type":46,"tag":72,"props":1388,"children":1389},{"style":114},[1390],{"type":51,"value":60},{"type":46,"tag":72,"props":1392,"children":1393},{"style":120},[1394],{"type":51,"value":1395},"vueApp",{"type":46,"tag":72,"props":1397,"children":1398},{"style":114},[1399],{"type":51,"value":60},{"type":46,"tag":72,"props":1401,"children":1402},{"style":120},[1403],{"type":51,"value":1404},"config",{"type":46,"tag":72,"props":1406,"children":1407},{"style":114},[1408],{"type":51,"value":60},{"type":46,"tag":72,"props":1410,"children":1411},{"style":120},[1412],{"type":51,"value":1413},"globalProperties",{"type":46,"tag":72,"props":1415,"children":1416},{"style":114},[1417],{"type":51,"value":1373},{"type":46,"tag":72,"props":1419,"children":1420},{"style":120},[1421],{"type":51,"value":1422},"$router)",{"type":46,"tag":177,"props":1424,"children":1426},{"id":1425},"ondevtoolsclientconnected",[1427],{"type":46,"tag":54,"props":1428,"children":1429},{"className":40},[1430],{"type":51,"value":1431},"onDevtoolsClientConnected()",{"type":46,"tag":47,"props":1433,"children":1434},{},[1435,1437,1441],{"type":51,"value":1436},"Similiar to ",{"type":46,"tag":54,"props":1438,"children":1439},{"className":40},[1440],{"type":51,"value":1237},{"type":51,"value":1442}," but as a callback style:",{"type":46,"tag":62,"props":1444,"children":1446},{"className":96,"code":1445,"language":98,"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",[1447],{"type":46,"tag":54,"props":1448,"children":1449},{"__ignoreMap":40},[1450,1486,1489,1528,1536,1539,1592,1600],{"type":46,"tag":72,"props":1451,"children":1452},{"class":74,"line":75},[1453,1457,1461,1466,1470,1474,1478,1482],{"type":46,"tag":72,"props":1454,"children":1455},{"style":108},[1456],{"type":51,"value":111},{"type":46,"tag":72,"props":1458,"children":1459},{"style":114},[1460],{"type":51,"value":117},{"type":46,"tag":72,"props":1462,"children":1463},{"style":120},[1464],{"type":51,"value":1465}," onDevtoolsClientConnected",{"type":46,"tag":72,"props":1467,"children":1468},{"style":114},[1469],{"type":51,"value":128},{"type":46,"tag":72,"props":1471,"children":1472},{"style":108},[1473],{"type":51,"value":133},{"type":46,"tag":72,"props":1475,"children":1476},{"style":114},[1477],{"type":51,"value":138},{"type":46,"tag":72,"props":1479,"children":1480},{"style":85},[1481],{"type":51,"value":1134},{"type":46,"tag":72,"props":1483,"children":1484},{"style":114},[1485],{"type":51,"value":148},{"type":46,"tag":72,"props":1487,"children":1488},{"class":74,"line":241},[],{"type":46,"tag":72,"props":1490,"children":1491},{"class":74,"line":245},[1492,1497,1501,1506,1510,1516,1520,1524],{"type":46,"tag":72,"props":1493,"children":1494},{"style":249},[1495],{"type":51,"value":1496},"onDevtoolsClientConnected",{"type":46,"tag":72,"props":1498,"children":1499},{"style":120},[1500],{"type":51,"value":257},{"type":46,"tag":72,"props":1502,"children":1503},{"style":265},[1504],{"type":51,"value":1505},"async",{"type":46,"tag":72,"props":1507,"children":1508},{"style":114},[1509],{"type":51,"value":273},{"type":46,"tag":72,"props":1511,"children":1513},{"style":1512},"color:#EEFFFF;--shiki-dark:#BABED8;--shiki-light:#90A4AE;font-style:italic;--shiki-dark-font-style:italic;--shiki-light-font-style:italic",[1514],{"type":51,"value":1515},"client",{"type":46,"tag":72,"props":1517,"children":1518},{"style":114},[1519],{"type":51,"value":900},{"type":46,"tag":72,"props":1521,"children":1522},{"style":265},[1523],{"type":51,"value":268},{"type":46,"tag":72,"props":1525,"children":1526},{"style":114},[1527],{"type":51,"value":117},{"type":46,"tag":72,"props":1529,"children":1530},{"class":74,"line":281},[1531],{"type":46,"tag":72,"props":1532,"children":1533},{"style":285},[1534],{"type":51,"value":1535}," // client is NuxtDevtoolsIframeClient",{"type":46,"tag":72,"props":1537,"children":1538},{"class":74,"line":291},[],{"type":46,"tag":72,"props":1540,"children":1541},{"class":74,"line":324},[1542,1547,1552,1557,1562,1566,1570,1574,1579,1583,1588],{"type":46,"tag":72,"props":1543,"children":1544},{"style":265},[1545],{"type":51,"value":1546}," const",{"type":46,"tag":72,"props":1548,"children":1549},{"style":120},[1550],{"type":51,"value":1551}," config",{"type":46,"tag":72,"props":1553,"children":1554},{"style":114},[1555],{"type":51,"value":1556}," =",{"type":46,"tag":72,"props":1558,"children":1559},{"style":120},[1560],{"type":51,"value":1561}," client",{"type":46,"tag":72,"props":1563,"children":1564},{"style":114},[1565],{"type":51,"value":60},{"type":46,"tag":72,"props":1567,"children":1568},{"style":120},[1569],{"type":51,"value":1298},{"type":46,"tag":72,"props":1571,"children":1572},{"style":114},[1573],{"type":51,"value":60},{"type":46,"tag":72,"props":1575,"children":1576},{"style":120},[1577],{"type":51,"value":1578},"rpc",{"type":46,"tag":72,"props":1580,"children":1581},{"style":114},[1582],{"type":51,"value":60},{"type":46,"tag":72,"props":1584,"children":1585},{"style":249},[1586],{"type":51,"value":1587},"getServerConfig",{"type":46,"tag":72,"props":1589,"children":1590},{"style":295},[1591],{"type":51,"value":262},{"type":46,"tag":72,"props":1593,"children":1594},{"class":74,"line":333},[1595],{"type":46,"tag":72,"props":1596,"children":1597},{"style":285},[1598],{"type":51,"value":1599}," // ...",{"type":46,"tag":72,"props":1601,"children":1602},{"class":74,"line":363},[1603,1607],{"type":46,"tag":72,"props":1604,"children":1605},{"style":114},[1606],{"type":51,"value":503},{"type":46,"tag":72,"props":1608,"children":1609},{"style":120},[1610],{"type":51,"value":900},{"type":46,"tag":1612,"props":1613,"children":1614},"style",{},[1615],{"type":51,"value":1616},"html.dark .shiki span {color: var(--shiki-dark) !important;background: var(--shiki-dark-bg) !important;font-style: var(--shiki-dark-font-style) !important;font-weight: var(--shiki-dark-font-weight) !important;text-decoration: var(--shiki-dark-text-decoration) !important;}html.light .shiki span {color: var(--shiki-light) !important;background: var(--shiki-light-bg) !important;font-style: var(--shiki-light-font-style) !important;font-weight: var(--shiki-light-font-weight) !important;text-decoration: var(--shiki-light-text-decoration) !important;}",{"title":40,"searchDepth":241,"depth":241,"links":1618},[1619,1625],{"id":170,"depth":241,"text":143,"children":1620},[1621,1622,1623,1624],{"id":179,"depth":245,"text":185},{"id":511,"depth":245,"text":517},{"id":532,"depth":245,"text":538},{"id":951,"depth":245,"text":957},{"id":1128,"depth":241,"text":1134,"children":1626},[1627,1628],{"id":1242,"depth":245,"text":1237},{"id":1425,"depth":245,"text":1431},"markdown","content:2.module:1.utils-kit.md","content","2.module/1.utils-kit.md","md",[1635,4061],{"_path":23,"_dir":38,"_draft":39,"_partial":39,"_locale":40,"title":22,"description":1636,"body":1637,"_type":1629,"_id":4059,"_source":1631,"_file":4060,"_extension":1633},"Add your own modules integration to the Nuxt DevTools.",{"type":43,"children":1638,"toc":4050},[1639,1644,1650,1655,1695,1700,1706,1711,1716,1972,1977,2283,2293,2299,2304,2936,2948,2966,2972,2984,2990,2995,3000,3130,3135,3616,3621,3960,3966,3971,3981,3987,3992,4046],{"type":46,"tag":47,"props":1640,"children":1641},{},[1642],{"type":51,"value":1643},"Nuxt DevTools is designed to be extensible. You can add your own modules integration to the DevTools.",{"type":46,"tag":168,"props":1645,"children":1647},{"id":1646},"starter-template",[1648],{"type":51,"value":1649},"Starter Template",{"type":46,"tag":47,"props":1651,"children":1652},{},[1653],{"type":51,"value":1654},"If you want to try integrating with Nuxt DevTools, you can run",{"type":46,"tag":62,"props":1656,"children":1658},{"className":64,"code":1657,"language":66,"meta":40,"style":40},"npx nuxi init my-module -t module-devtools\n",[1659],{"type":46,"tag":54,"props":1660,"children":1661},{"__ignoreMap":40},[1662],{"type":46,"tag":72,"props":1663,"children":1664},{"class":74,"line":75},[1665,1670,1675,1680,1685,1690],{"type":46,"tag":72,"props":1666,"children":1667},{"style":79},[1668],{"type":51,"value":1669},"npx",{"type":46,"tag":72,"props":1671,"children":1672},{"style":85},[1673],{"type":51,"value":1674}," nuxi",{"type":46,"tag":72,"props":1676,"children":1677},{"style":85},[1678],{"type":51,"value":1679}," init",{"type":46,"tag":72,"props":1681,"children":1682},{"style":85},[1683],{"type":51,"value":1684}," my-module",{"type":46,"tag":72,"props":1686,"children":1687},{"style":85},[1688],{"type":51,"value":1689}," -t",{"type":46,"tag":72,"props":1691,"children":1692},{"style":85},[1693],{"type":51,"value":1694}," module-devtools",{"type":46,"tag":47,"props":1696,"children":1697},{},[1698],{"type":51,"value":1699},"to create a new module starter with Nuxt DevTools integration pre-configured (contributing a fully custom view as a tab).",{"type":46,"tag":168,"props":1701,"children":1703},{"id":1702},"contributing-to-view",[1704],{"type":51,"value":1705},"Contributing to View",{"type":46,"tag":47,"props":1707,"children":1708},{},[1709],{"type":51,"value":1710},"Currently the only way to contribute to Nuxt DevTools View is via iframe. You need to serve your module's view yourself and then register it to the DevTools.",{"type":46,"tag":47,"props":1712,"children":1713},{},[1714],{"type":51,"value":1715},"You can use the utility kit provided by Nuxt DevTools to register your custom tab:",{"type":46,"tag":62,"props":1717,"children":1719},{"className":96,"code":1718,"language":98,"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",[1720],{"type":46,"tag":54,"props":1721,"children":1722},{"__ignoreMap":40},[1723,1758,1761,1776,1783,1810,1817,1844,1851,1878,1885,1900,1927,1954,1961],{"type":46,"tag":72,"props":1724,"children":1725},{"class":74,"line":75},[1726,1730,1734,1738,1742,1746,1750,1754],{"type":46,"tag":72,"props":1727,"children":1728},{"style":108},[1729],{"type":51,"value":111},{"type":46,"tag":72,"props":1731,"children":1732},{"style":114},[1733],{"type":51,"value":117},{"type":46,"tag":72,"props":1735,"children":1736},{"style":120},[1737],{"type":51,"value":123},{"type":46,"tag":72,"props":1739,"children":1740},{"style":114},[1741],{"type":51,"value":128},{"type":46,"tag":72,"props":1743,"children":1744},{"style":108},[1745],{"type":51,"value":133},{"type":46,"tag":72,"props":1747,"children":1748},{"style":114},[1749],{"type":51,"value":138},{"type":46,"tag":72,"props":1751,"children":1752},{"style":85},[1753],{"type":51,"value":143},{"type":46,"tag":72,"props":1755,"children":1756},{"style":114},[1757],{"type":51,"value":148},{"type":46,"tag":72,"props":1759,"children":1760},{"class":74,"line":241},[],{"type":46,"tag":72,"props":1762,"children":1763},{"class":74,"line":245},[1764,1768,1772],{"type":46,"tag":72,"props":1765,"children":1766},{"style":249},[1767],{"type":51,"value":252},{"type":46,"tag":72,"props":1769,"children":1770},{"style":120},[1771],{"type":51,"value":257},{"type":46,"tag":72,"props":1773,"children":1774},{"style":114},[1775],{"type":51,"value":278},{"type":46,"tag":72,"props":1777,"children":1778},{"class":74,"line":281},[1779],{"type":46,"tag":72,"props":1780,"children":1781},{"style":285},[1782],{"type":51,"value":288},{"type":46,"tag":72,"props":1784,"children":1785},{"class":74,"line":291},[1786,1790,1794,1798,1802,1806],{"type":46,"tag":72,"props":1787,"children":1788},{"style":295},[1789],{"type":51,"value":298},{"type":46,"tag":72,"props":1791,"children":1792},{"style":114},[1793],{"type":51,"value":303},{"type":46,"tag":72,"props":1795,"children":1796},{"style":114},[1797],{"type":51,"value":138},{"type":46,"tag":72,"props":1799,"children":1800},{"style":85},[1801],{"type":51,"value":312},{"type":46,"tag":72,"props":1803,"children":1804},{"style":114},[1805],{"type":51,"value":148},{"type":46,"tag":72,"props":1807,"children":1808},{"style":114},[1809],{"type":51,"value":321},{"type":46,"tag":72,"props":1811,"children":1812},{"class":74,"line":324},[1813],{"type":46,"tag":72,"props":1814,"children":1815},{"style":285},[1816],{"type":51,"value":330},{"type":46,"tag":72,"props":1818,"children":1819},{"class":74,"line":333},[1820,1824,1828,1832,1836,1840],{"type":46,"tag":72,"props":1821,"children":1822},{"style":295},[1823],{"type":51,"value":339},{"type":46,"tag":72,"props":1825,"children":1826},{"style":114},[1827],{"type":51,"value":303},{"type":46,"tag":72,"props":1829,"children":1830},{"style":114},[1831],{"type":51,"value":138},{"type":46,"tag":72,"props":1833,"children":1834},{"style":85},[1835],{"type":51,"value":352},{"type":46,"tag":72,"props":1837,"children":1838},{"style":114},[1839],{"type":51,"value":148},{"type":46,"tag":72,"props":1841,"children":1842},{"style":114},[1843],{"type":51,"value":321},{"type":46,"tag":72,"props":1845,"children":1846},{"class":74,"line":363},[1847],{"type":46,"tag":72,"props":1848,"children":1849},{"style":285},[1850],{"type":51,"value":369},{"type":46,"tag":72,"props":1852,"children":1853},{"class":74,"line":372},[1854,1858,1862,1866,1870,1874],{"type":46,"tag":72,"props":1855,"children":1856},{"style":295},[1857],{"type":51,"value":378},{"type":46,"tag":72,"props":1859,"children":1860},{"style":114},[1861],{"type":51,"value":303},{"type":46,"tag":72,"props":1863,"children":1864},{"style":114},[1865],{"type":51,"value":138},{"type":46,"tag":72,"props":1867,"children":1868},{"style":85},[1869],{"type":51,"value":391},{"type":46,"tag":72,"props":1871,"children":1872},{"style":114},[1873],{"type":51,"value":148},{"type":46,"tag":72,"props":1875,"children":1876},{"style":114},[1877],{"type":51,"value":321},{"type":46,"tag":72,"props":1879,"children":1880},{"class":74,"line":402},[1881],{"type":46,"tag":72,"props":1882,"children":1883},{"style":285},[1884],{"type":51,"value":408},{"type":46,"tag":72,"props":1886,"children":1887},{"class":74,"line":411},[1888,1892,1896],{"type":46,"tag":72,"props":1889,"children":1890},{"style":295},[1891],{"type":51,"value":417},{"type":46,"tag":72,"props":1893,"children":1894},{"style":114},[1895],{"type":51,"value":303},{"type":46,"tag":72,"props":1897,"children":1898},{"style":114},[1899],{"type":51,"value":117},{"type":46,"tag":72,"props":1901,"children":1902},{"class":74,"line":428},[1903,1907,1911,1915,1919,1923],{"type":46,"tag":72,"props":1904,"children":1905},{"style":295},[1906],{"type":51,"value":434},{"type":46,"tag":72,"props":1908,"children":1909},{"style":114},[1910],{"type":51,"value":303},{"type":46,"tag":72,"props":1912,"children":1913},{"style":114},[1914],{"type":51,"value":138},{"type":46,"tag":72,"props":1916,"children":1917},{"style":85},[1918],{"type":51,"value":447},{"type":46,"tag":72,"props":1920,"children":1921},{"style":114},[1922],{"type":51,"value":148},{"type":46,"tag":72,"props":1924,"children":1925},{"style":114},[1926],{"type":51,"value":321},{"type":46,"tag":72,"props":1928,"children":1929},{"class":74,"line":458},[1930,1934,1938,1942,1946,1950],{"type":46,"tag":72,"props":1931,"children":1932},{"style":295},[1933],{"type":51,"value":464},{"type":46,"tag":72,"props":1935,"children":1936},{"style":114},[1937],{"type":51,"value":303},{"type":46,"tag":72,"props":1939,"children":1940},{"style":114},[1941],{"type":51,"value":138},{"type":46,"tag":72,"props":1943,"children":1944},{"style":85},[1945],{"type":51,"value":477},{"type":46,"tag":72,"props":1947,"children":1948},{"style":114},[1949],{"type":51,"value":148},{"type":46,"tag":72,"props":1951,"children":1952},{"style":114},[1953],{"type":51,"value":321},{"type":46,"tag":72,"props":1955,"children":1956},{"class":74,"line":488},[1957],{"type":46,"tag":72,"props":1958,"children":1959},{"style":114},[1960],{"type":51,"value":494},{"type":46,"tag":72,"props":1962,"children":1963},{"class":74,"line":497},[1964,1968],{"type":46,"tag":72,"props":1965,"children":1966},{"style":114},[1967],{"type":51,"value":503},{"type":46,"tag":72,"props":1969,"children":1970},{"style":120},[1971],{"type":51,"value":900},{"type":46,"tag":47,"props":1973,"children":1974},{},[1975],{"type":51,"value":1976},"Or if you prefer to use Nuxt hooks:",{"type":46,"tag":62,"props":1978,"children":1980},{"className":96,"code":1979,"language":98,"meta":40,"style":40},"nuxt.hook('devtools:customTabs', (tabs) => {\n tabs.push({\n // unique identifier\n name: 'my-module',\n // title to display in the tab\n title: 'My Module',\n // any icon from Iconify, or a URL to an image\n icon: 'carbon:apps',\n // iframe view\n view: {\n type: 'iframe',\n src: '/url-to-your-module-view',\n },\n })\n})\n",[1981],{"type":46,"tag":54,"props":1982,"children":1983},{"__ignoreMap":40},[1984,2041,2066,2074,2101,2109,2137,2145,2172,2180,2196,2224,2252,2260,2272],{"type":46,"tag":72,"props":1985,"children":1986},{"class":74,"line":75},[1987,1991,1995,2000,2004,2008,2012,2016,2020,2024,2029,2033,2037],{"type":46,"tag":72,"props":1988,"children":1989},{"style":120},[1990],{"type":51,"value":1386},{"type":46,"tag":72,"props":1992,"children":1993},{"style":114},[1994],{"type":51,"value":60},{"type":46,"tag":72,"props":1996,"children":1997},{"style":249},[1998],{"type":51,"value":1999},"hook",{"type":46,"tag":72,"props":2001,"children":2002},{"style":120},[2003],{"type":51,"value":257},{"type":46,"tag":72,"props":2005,"children":2006},{"style":114},[2007],{"type":51,"value":148},{"type":46,"tag":72,"props":2009,"children":2010},{"style":85},[2011],{"type":51,"value":195},{"type":46,"tag":72,"props":2013,"children":2014},{"style":114},[2015],{"type":51,"value":148},{"type":46,"tag":72,"props":2017,"children":2018},{"style":114},[2019],{"type":51,"value":321},{"type":46,"tag":72,"props":2021,"children":2022},{"style":114},[2023],{"type":51,"value":273},{"type":46,"tag":72,"props":2025,"children":2026},{"style":1512},[2027],{"type":51,"value":2028},"tabs",{"type":46,"tag":72,"props":2030,"children":2031},{"style":114},[2032],{"type":51,"value":900},{"type":46,"tag":72,"props":2034,"children":2035},{"style":265},[2036],{"type":51,"value":268},{"type":46,"tag":72,"props":2038,"children":2039},{"style":114},[2040],{"type":51,"value":117},{"type":46,"tag":72,"props":2042,"children":2043},{"class":74,"line":241},[2044,2049,2053,2058,2062],{"type":46,"tag":72,"props":2045,"children":2046},{"style":120},[2047],{"type":51,"value":2048}," tabs",{"type":46,"tag":72,"props":2050,"children":2051},{"style":114},[2052],{"type":51,"value":60},{"type":46,"tag":72,"props":2054,"children":2055},{"style":249},[2056],{"type":51,"value":2057},"push",{"type":46,"tag":72,"props":2059,"children":2060},{"style":295},[2061],{"type":51,"value":257},{"type":46,"tag":72,"props":2063,"children":2064},{"style":114},[2065],{"type":51,"value":278},{"type":46,"tag":72,"props":2067,"children":2068},{"class":74,"line":245},[2069],{"type":46,"tag":72,"props":2070,"children":2071},{"style":285},[2072],{"type":51,"value":2073}," // unique identifier",{"type":46,"tag":72,"props":2075,"children":2076},{"class":74,"line":281},[2077,2081,2085,2089,2093,2097],{"type":46,"tag":72,"props":2078,"children":2079},{"style":295},[2080],{"type":51,"value":832},{"type":46,"tag":72,"props":2082,"children":2083},{"style":114},[2084],{"type":51,"value":303},{"type":46,"tag":72,"props":2086,"children":2087},{"style":114},[2088],{"type":51,"value":138},{"type":46,"tag":72,"props":2090,"children":2091},{"style":85},[2092],{"type":51,"value":312},{"type":46,"tag":72,"props":2094,"children":2095},{"style":114},[2096],{"type":51,"value":148},{"type":46,"tag":72,"props":2098,"children":2099},{"style":114},[2100],{"type":51,"value":321},{"type":46,"tag":72,"props":2102,"children":2103},{"class":74,"line":291},[2104],{"type":46,"tag":72,"props":2105,"children":2106},{"style":285},[2107],{"type":51,"value":2108}," // title to display in the tab",{"type":46,"tag":72,"props":2110,"children":2111},{"class":74,"line":324},[2112,2117,2121,2125,2129,2133],{"type":46,"tag":72,"props":2113,"children":2114},{"style":295},[2115],{"type":51,"value":2116}," title",{"type":46,"tag":72,"props":2118,"children":2119},{"style":114},[2120],{"type":51,"value":303},{"type":46,"tag":72,"props":2122,"children":2123},{"style":114},[2124],{"type":51,"value":138},{"type":46,"tag":72,"props":2126,"children":2127},{"style":85},[2128],{"type":51,"value":352},{"type":46,"tag":72,"props":2130,"children":2131},{"style":114},[2132],{"type":51,"value":148},{"type":46,"tag":72,"props":2134,"children":2135},{"style":114},[2136],{"type":51,"value":321},{"type":46,"tag":72,"props":2138,"children":2139},{"class":74,"line":333},[2140],{"type":46,"tag":72,"props":2141,"children":2142},{"style":285},[2143],{"type":51,"value":2144}," // any icon from Iconify, or a URL to an image",{"type":46,"tag":72,"props":2146,"children":2147},{"class":74,"line":363},[2148,2152,2156,2160,2164,2168],{"type":46,"tag":72,"props":2149,"children":2150},{"style":295},[2151],{"type":51,"value":862},{"type":46,"tag":72,"props":2153,"children":2154},{"style":114},[2155],{"type":51,"value":303},{"type":46,"tag":72,"props":2157,"children":2158},{"style":114},[2159],{"type":51,"value":138},{"type":46,"tag":72,"props":2161,"children":2162},{"style":85},[2163],{"type":51,"value":391},{"type":46,"tag":72,"props":2165,"children":2166},{"style":114},[2167],{"type":51,"value":148},{"type":46,"tag":72,"props":2169,"children":2170},{"style":114},[2171],{"type":51,"value":321},{"type":46,"tag":72,"props":2173,"children":2174},{"class":74,"line":372},[2175],{"type":46,"tag":72,"props":2176,"children":2177},{"style":285},[2178],{"type":51,"value":2179}," // iframe view",{"type":46,"tag":72,"props":2181,"children":2182},{"class":74,"line":402},[2183,2188,2192],{"type":46,"tag":72,"props":2184,"children":2185},{"style":295},[2186],{"type":51,"value":2187}," view",{"type":46,"tag":72,"props":2189,"children":2190},{"style":114},[2191],{"type":51,"value":303},{"type":46,"tag":72,"props":2193,"children":2194},{"style":114},[2195],{"type":51,"value":117},{"type":46,"tag":72,"props":2197,"children":2198},{"class":74,"line":411},[2199,2204,2208,2212,2216,2220],{"type":46,"tag":72,"props":2200,"children":2201},{"style":295},[2202],{"type":51,"value":2203}," type",{"type":46,"tag":72,"props":2205,"children":2206},{"style":114},[2207],{"type":51,"value":303},{"type":46,"tag":72,"props":2209,"children":2210},{"style":114},[2211],{"type":51,"value":138},{"type":46,"tag":72,"props":2213,"children":2214},{"style":85},[2215],{"type":51,"value":447},{"type":46,"tag":72,"props":2217,"children":2218},{"style":114},[2219],{"type":51,"value":148},{"type":46,"tag":72,"props":2221,"children":2222},{"style":114},[2223],{"type":51,"value":321},{"type":46,"tag":72,"props":2225,"children":2226},{"class":74,"line":428},[2227,2232,2236,2240,2244,2248],{"type":46,"tag":72,"props":2228,"children":2229},{"style":295},[2230],{"type":51,"value":2231}," src",{"type":46,"tag":72,"props":2233,"children":2234},{"style":114},[2235],{"type":51,"value":303},{"type":46,"tag":72,"props":2237,"children":2238},{"style":114},[2239],{"type":51,"value":138},{"type":46,"tag":72,"props":2241,"children":2242},{"style":85},[2243],{"type":51,"value":477},{"type":46,"tag":72,"props":2245,"children":2246},{"style":114},[2247],{"type":51,"value":148},{"type":46,"tag":72,"props":2249,"children":2250},{"style":114},[2251],{"type":51,"value":321},{"type":46,"tag":72,"props":2253,"children":2254},{"class":74,"line":458},[2255],{"type":46,"tag":72,"props":2256,"children":2257},{"style":114},[2258],{"type":51,"value":2259}," },",{"type":46,"tag":72,"props":2261,"children":2262},{"class":74,"line":488},[2263,2268],{"type":46,"tag":72,"props":2264,"children":2265},{"style":114},[2266],{"type":51,"value":2267}," }",{"type":46,"tag":72,"props":2269,"children":2270},{"style":295},[2271],{"type":51,"value":900},{"type":46,"tag":72,"props":2273,"children":2274},{"class":74,"line":497},[2275,2279],{"type":46,"tag":72,"props":2276,"children":2277},{"style":114},[2278],{"type":51,"value":503},{"type":46,"tag":72,"props":2280,"children":2281},{"style":120},[2282],{"type":51,"value":900},{"type":46,"tag":47,"props":2284,"children":2285},{},[2286,2287,2292],{"type":51,"value":1117},{"type":46,"tag":1119,"props":2288,"children":2289},{"href":26},[2290],{"type":51,"value":2291},"DevTools Utility Kit",{"type":51,"value":60},{"type":46,"tag":168,"props":2294,"children":2296},{"id":2295},"lazy-service-launching",[2297],{"type":51,"value":2298},"Lazy Service Launching",{"type":46,"tag":47,"props":2300,"children":2301},{},[2302],{"type":51,"value":2303},"If the view you are contributing is heavy to load, you can have the tab first and let user launch it when they need it.",{"type":46,"tag":62,"props":2305,"children":2307},{"className":96,"code":2306,"language":98,"meta":40,"style":40},"let isReady = false\nconst promise: Promise\u003Cany> | null = null\n\nasync function launchService() {\n // ...launch your service\n isReady = true\n}\n\nnuxt.hook('devtools:customTabs', (tabs) => {\n tabs.push({\n name: 'my-module',\n title: 'My Module',\n view: isReady\n ? {\n type: 'iframe',\n src: '/url-to-your-module-view',\n }\n : {\n type: 'launch',\n description: 'Launch My Module',\n actions: [{\n label: 'Start',\n async handle() {\n if (!promise)\n promise = launchService()\n await promise\n },\n }]\n },\n })\n})\n",[2308],{"type":46,"tag":54,"props":2309,"children":2310},{"__ignoreMap":40},[2311,2334,2388,2391,2416,2424,2441,2448,2451,2506,2529,2556,2583,2599,2611,2639,2667,2675,2687,2716,2746,2767,2797,2819,2846,2867,2880,2889,2903,2912,2924],{"type":46,"tag":72,"props":2312,"children":2313},{"class":74,"line":75},[2314,2319,2324,2328],{"type":46,"tag":72,"props":2315,"children":2316},{"style":265},[2317],{"type":51,"value":2318},"let",{"type":46,"tag":72,"props":2320,"children":2321},{"style":120},[2322],{"type":51,"value":2323}," isReady ",{"type":46,"tag":72,"props":2325,"children":2326},{"style":114},[2327],{"type":51,"value":614},{"type":46,"tag":72,"props":2329,"children":2331},{"style":2330},"color:#FF9CAC;--shiki-dark:#FF9CAC;--shiki-light:#FF5370",[2332],{"type":51,"value":2333}," false",{"type":46,"tag":72,"props":2335,"children":2336},{"class":74,"line":241},[2337,2341,2346,2350,2355,2360,2365,2370,2375,2380,2384],{"type":46,"tag":72,"props":2338,"children":2339},{"style":265},[2340],{"type":51,"value":604},{"type":46,"tag":72,"props":2342,"children":2343},{"style":120},[2344],{"type":51,"value":2345}," promise",{"type":46,"tag":72,"props":2347,"children":2348},{"style":114},[2349],{"type":51,"value":303},{"type":46,"tag":72,"props":2351,"children":2352},{"style":79},[2353],{"type":51,"value":2354}," Promise",{"type":46,"tag":72,"props":2356,"children":2357},{"style":114},[2358],{"type":51,"value":2359},"\u003C",{"type":46,"tag":72,"props":2361,"children":2362},{"style":79},[2363],{"type":51,"value":2364},"any",{"type":46,"tag":72,"props":2366,"children":2367},{"style":114},[2368],{"type":51,"value":2369},">",{"type":46,"tag":72,"props":2371,"children":2372},{"style":114},[2373],{"type":51,"value":2374}," |",{"type":46,"tag":72,"props":2376,"children":2377},{"style":79},[2378],{"type":51,"value":2379}," null",{"type":46,"tag":72,"props":2381,"children":2382},{"style":114},[2383],{"type":51,"value":1556},{"type":46,"tag":72,"props":2385,"children":2386},{"style":114},[2387],{"type":51,"value":2379},{"type":46,"tag":72,"props":2389,"children":2390},{"class":74,"line":245},[],{"type":46,"tag":72,"props":2392,"children":2393},{"class":74,"line":281},[2394,2398,2403,2408,2412],{"type":46,"tag":72,"props":2395,"children":2396},{"style":265},[2397],{"type":51,"value":1505},{"type":46,"tag":72,"props":2399,"children":2400},{"style":265},[2401],{"type":51,"value":2402}," function",{"type":46,"tag":72,"props":2404,"children":2405},{"style":249},[2406],{"type":51,"value":2407}," launchService",{"type":46,"tag":72,"props":2409,"children":2410},{"style":114},[2411],{"type":51,"value":262},{"type":46,"tag":72,"props":2413,"children":2414},{"style":114},[2415],{"type":51,"value":117},{"type":46,"tag":72,"props":2417,"children":2418},{"class":74,"line":291},[2419],{"type":46,"tag":72,"props":2420,"children":2421},{"style":285},[2422],{"type":51,"value":2423}," // ...launch your service",{"type":46,"tag":72,"props":2425,"children":2426},{"class":74,"line":324},[2427,2432,2436],{"type":46,"tag":72,"props":2428,"children":2429},{"style":120},[2430],{"type":51,"value":2431}," isReady",{"type":46,"tag":72,"props":2433,"children":2434},{"style":114},[2435],{"type":51,"value":1556},{"type":46,"tag":72,"props":2437,"children":2438},{"style":2330},[2439],{"type":51,"value":2440}," true",{"type":46,"tag":72,"props":2442,"children":2443},{"class":74,"line":333},[2444],{"type":46,"tag":72,"props":2445,"children":2446},{"style":114},[2447],{"type":51,"value":503},{"type":46,"tag":72,"props":2449,"children":2450},{"class":74,"line":363},[],{"type":46,"tag":72,"props":2452,"children":2453},{"class":74,"line":372},[2454,2458,2462,2466,2470,2474,2478,2482,2486,2490,2494,2498,2502],{"type":46,"tag":72,"props":2455,"children":2456},{"style":120},[2457],{"type":51,"value":1386},{"type":46,"tag":72,"props":2459,"children":2460},{"style":114},[2461],{"type":51,"value":60},{"type":46,"tag":72,"props":2463,"children":2464},{"style":249},[2465],{"type":51,"value":1999},{"type":46,"tag":72,"props":2467,"children":2468},{"style":120},[2469],{"type":51,"value":257},{"type":46,"tag":72,"props":2471,"children":2472},{"style":114},[2473],{"type":51,"value":148},{"type":46,"tag":72,"props":2475,"children":2476},{"style":85},[2477],{"type":51,"value":195},{"type":46,"tag":72,"props":2479,"children":2480},{"style":114},[2481],{"type":51,"value":148},{"type":46,"tag":72,"props":2483,"children":2484},{"style":114},[2485],{"type":51,"value":321},{"type":46,"tag":72,"props":2487,"children":2488},{"style":114},[2489],{"type":51,"value":273},{"type":46,"tag":72,"props":2491,"children":2492},{"style":1512},[2493],{"type":51,"value":2028},{"type":46,"tag":72,"props":2495,"children":2496},{"style":114},[2497],{"type":51,"value":900},{"type":46,"tag":72,"props":2499,"children":2500},{"style":265},[2501],{"type":51,"value":268},{"type":46,"tag":72,"props":2503,"children":2504},{"style":114},[2505],{"type":51,"value":117},{"type":46,"tag":72,"props":2507,"children":2508},{"class":74,"line":402},[2509,2513,2517,2521,2525],{"type":46,"tag":72,"props":2510,"children":2511},{"style":120},[2512],{"type":51,"value":2048},{"type":46,"tag":72,"props":2514,"children":2515},{"style":114},[2516],{"type":51,"value":60},{"type":46,"tag":72,"props":2518,"children":2519},{"style":249},[2520],{"type":51,"value":2057},{"type":46,"tag":72,"props":2522,"children":2523},{"style":295},[2524],{"type":51,"value":257},{"type":46,"tag":72,"props":2526,"children":2527},{"style":114},[2528],{"type":51,"value":278},{"type":46,"tag":72,"props":2530,"children":2531},{"class":74,"line":411},[2532,2536,2540,2544,2548,2552],{"type":46,"tag":72,"props":2533,"children":2534},{"style":295},[2535],{"type":51,"value":832},{"type":46,"tag":72,"props":2537,"children":2538},{"style":114},[2539],{"type":51,"value":303},{"type":46,"tag":72,"props":2541,"children":2542},{"style":114},[2543],{"type":51,"value":138},{"type":46,"tag":72,"props":2545,"children":2546},{"style":85},[2547],{"type":51,"value":312},{"type":46,"tag":72,"props":2549,"children":2550},{"style":114},[2551],{"type":51,"value":148},{"type":46,"tag":72,"props":2553,"children":2554},{"style":114},[2555],{"type":51,"value":321},{"type":46,"tag":72,"props":2557,"children":2558},{"class":74,"line":428},[2559,2563,2567,2571,2575,2579],{"type":46,"tag":72,"props":2560,"children":2561},{"style":295},[2562],{"type":51,"value":2116},{"type":46,"tag":72,"props":2564,"children":2565},{"style":114},[2566],{"type":51,"value":303},{"type":46,"tag":72,"props":2568,"children":2569},{"style":114},[2570],{"type":51,"value":138},{"type":46,"tag":72,"props":2572,"children":2573},{"style":85},[2574],{"type":51,"value":352},{"type":46,"tag":72,"props":2576,"children":2577},{"style":114},[2578],{"type":51,"value":148},{"type":46,"tag":72,"props":2580,"children":2581},{"style":114},[2582],{"type":51,"value":321},{"type":46,"tag":72,"props":2584,"children":2585},{"class":74,"line":458},[2586,2590,2594],{"type":46,"tag":72,"props":2587,"children":2588},{"style":295},[2589],{"type":51,"value":2187},{"type":46,"tag":72,"props":2591,"children":2592},{"style":114},[2593],{"type":51,"value":303},{"type":46,"tag":72,"props":2595,"children":2596},{"style":120},[2597],{"type":51,"value":2598}," isReady",{"type":46,"tag":72,"props":2600,"children":2601},{"class":74,"line":488},[2602,2607],{"type":46,"tag":72,"props":2603,"children":2604},{"style":114},[2605],{"type":51,"value":2606}," ?",{"type":46,"tag":72,"props":2608,"children":2609},{"style":114},[2610],{"type":51,"value":117},{"type":46,"tag":72,"props":2612,"children":2613},{"class":74,"line":497},[2614,2619,2623,2627,2631,2635],{"type":46,"tag":72,"props":2615,"children":2616},{"style":295},[2617],{"type":51,"value":2618}," type",{"type":46,"tag":72,"props":2620,"children":2621},{"style":114},[2622],{"type":51,"value":303},{"type":46,"tag":72,"props":2624,"children":2625},{"style":114},[2626],{"type":51,"value":138},{"type":46,"tag":72,"props":2628,"children":2629},{"style":85},[2630],{"type":51,"value":447},{"type":46,"tag":72,"props":2632,"children":2633},{"style":114},[2634],{"type":51,"value":148},{"type":46,"tag":72,"props":2636,"children":2637},{"style":114},[2638],{"type":51,"value":321},{"type":46,"tag":72,"props":2640,"children":2641},{"class":74,"line":856},[2642,2647,2651,2655,2659,2663],{"type":46,"tag":72,"props":2643,"children":2644},{"style":295},[2645],{"type":51,"value":2646}," src",{"type":46,"tag":72,"props":2648,"children":2649},{"style":114},[2650],{"type":51,"value":303},{"type":46,"tag":72,"props":2652,"children":2653},{"style":114},[2654],{"type":51,"value":138},{"type":46,"tag":72,"props":2656,"children":2657},{"style":85},[2658],{"type":51,"value":477},{"type":46,"tag":72,"props":2660,"children":2661},{"style":114},[2662],{"type":51,"value":148},{"type":46,"tag":72,"props":2664,"children":2665},{"style":114},[2666],{"type":51,"value":321},{"type":46,"tag":72,"props":2668,"children":2669},{"class":74,"line":886},[2670],{"type":46,"tag":72,"props":2671,"children":2672},{"style":114},[2673],{"type":51,"value":2674}," }",{"type":46,"tag":72,"props":2676,"children":2677},{"class":74,"line":894},[2678,2683],{"type":46,"tag":72,"props":2679,"children":2680},{"style":114},[2681],{"type":51,"value":2682}," :",{"type":46,"tag":72,"props":2684,"children":2685},{"style":114},[2686],{"type":51,"value":117},{"type":46,"tag":72,"props":2688,"children":2690},{"class":74,"line":2689},19,[2691,2695,2699,2703,2708,2712],{"type":46,"tag":72,"props":2692,"children":2693},{"style":295},[2694],{"type":51,"value":2618},{"type":46,"tag":72,"props":2696,"children":2697},{"style":114},[2698],{"type":51,"value":303},{"type":46,"tag":72,"props":2700,"children":2701},{"style":114},[2702],{"type":51,"value":138},{"type":46,"tag":72,"props":2704,"children":2705},{"style":85},[2706],{"type":51,"value":2707},"launch",{"type":46,"tag":72,"props":2709,"children":2710},{"style":114},[2711],{"type":51,"value":148},{"type":46,"tag":72,"props":2713,"children":2714},{"style":114},[2715],{"type":51,"value":321},{"type":46,"tag":72,"props":2717,"children":2719},{"class":74,"line":2718},20,[2720,2725,2729,2733,2738,2742],{"type":46,"tag":72,"props":2721,"children":2722},{"style":295},[2723],{"type":51,"value":2724}," description",{"type":46,"tag":72,"props":2726,"children":2727},{"style":114},[2728],{"type":51,"value":303},{"type":46,"tag":72,"props":2730,"children":2731},{"style":114},[2732],{"type":51,"value":138},{"type":46,"tag":72,"props":2734,"children":2735},{"style":85},[2736],{"type":51,"value":2737},"Launch My Module",{"type":46,"tag":72,"props":2739,"children":2740},{"style":114},[2741],{"type":51,"value":148},{"type":46,"tag":72,"props":2743,"children":2744},{"style":114},[2745],{"type":51,"value":321},{"type":46,"tag":72,"props":2747,"children":2749},{"class":74,"line":2748},21,[2750,2755,2759,2763],{"type":46,"tag":72,"props":2751,"children":2752},{"style":295},[2753],{"type":51,"value":2754}," actions",{"type":46,"tag":72,"props":2756,"children":2757},{"style":114},[2758],{"type":51,"value":303},{"type":46,"tag":72,"props":2760,"children":2761},{"style":295},[2762],{"type":51,"value":676},{"type":46,"tag":72,"props":2764,"children":2765},{"style":114},[2766],{"type":51,"value":278},{"type":46,"tag":72,"props":2768,"children":2770},{"class":74,"line":2769},22,[2771,2776,2780,2784,2789,2793],{"type":46,"tag":72,"props":2772,"children":2773},{"style":295},[2774],{"type":51,"value":2775}," label",{"type":46,"tag":72,"props":2777,"children":2778},{"style":114},[2779],{"type":51,"value":303},{"type":46,"tag":72,"props":2781,"children":2782},{"style":114},[2783],{"type":51,"value":138},{"type":46,"tag":72,"props":2785,"children":2786},{"style":85},[2787],{"type":51,"value":2788},"Start",{"type":46,"tag":72,"props":2790,"children":2791},{"style":114},[2792],{"type":51,"value":148},{"type":46,"tag":72,"props":2794,"children":2795},{"style":114},[2796],{"type":51,"value":321},{"type":46,"tag":72,"props":2798,"children":2800},{"class":74,"line":2799},23,[2801,2806,2811,2815],{"type":46,"tag":72,"props":2802,"children":2803},{"style":265},[2804],{"type":51,"value":2805}," async",{"type":46,"tag":72,"props":2807,"children":2808},{"style":295},[2809],{"type":51,"value":2810}," handle",{"type":46,"tag":72,"props":2812,"children":2813},{"style":114},[2814],{"type":51,"value":262},{"type":46,"tag":72,"props":2816,"children":2817},{"style":114},[2818],{"type":51,"value":117},{"type":46,"tag":72,"props":2820,"children":2822},{"class":74,"line":2821},24,[2823,2828,2832,2837,2842],{"type":46,"tag":72,"props":2824,"children":2825},{"style":108},[2826],{"type":51,"value":2827}," if",{"type":46,"tag":72,"props":2829,"children":2830},{"style":295},[2831],{"type":51,"value":273},{"type":46,"tag":72,"props":2833,"children":2834},{"style":114},[2835],{"type":51,"value":2836},"!",{"type":46,"tag":72,"props":2838,"children":2839},{"style":120},[2840],{"type":51,"value":2841},"promise",{"type":46,"tag":72,"props":2843,"children":2844},{"style":295},[2845],{"type":51,"value":900},{"type":46,"tag":72,"props":2847,"children":2849},{"class":74,"line":2848},25,[2850,2855,2859,2863],{"type":46,"tag":72,"props":2851,"children":2852},{"style":120},[2853],{"type":51,"value":2854}," promise",{"type":46,"tag":72,"props":2856,"children":2857},{"style":114},[2858],{"type":51,"value":1556},{"type":46,"tag":72,"props":2860,"children":2861},{"style":249},[2862],{"type":51,"value":2407},{"type":46,"tag":72,"props":2864,"children":2865},{"style":295},[2866],{"type":51,"value":262},{"type":46,"tag":72,"props":2868,"children":2870},{"class":74,"line":2869},26,[2871,2876],{"type":46,"tag":72,"props":2872,"children":2873},{"style":108},[2874],{"type":51,"value":2875}," await",{"type":46,"tag":72,"props":2877,"children":2878},{"style":120},[2879],{"type":51,"value":2345},{"type":46,"tag":72,"props":2881,"children":2883},{"class":74,"line":2882},27,[2884],{"type":46,"tag":72,"props":2885,"children":2886},{"style":114},[2887],{"type":51,"value":2888}," },",{"type":46,"tag":72,"props":2890,"children":2892},{"class":74,"line":2891},28,[2893,2898],{"type":46,"tag":72,"props":2894,"children":2895},{"style":114},[2896],{"type":51,"value":2897}," }",{"type":46,"tag":72,"props":2899,"children":2900},{"style":295},[2901],{"type":51,"value":2902},"]",{"type":46,"tag":72,"props":2904,"children":2906},{"class":74,"line":2905},29,[2907],{"type":46,"tag":72,"props":2908,"children":2909},{"style":114},[2910],{"type":51,"value":2911}," },",{"type":46,"tag":72,"props":2913,"children":2915},{"class":74,"line":2914},30,[2916,2920],{"type":46,"tag":72,"props":2917,"children":2918},{"style":114},[2919],{"type":51,"value":2267},{"type":46,"tag":72,"props":2921,"children":2922},{"style":295},[2923],{"type":51,"value":900},{"type":46,"tag":72,"props":2925,"children":2927},{"class":74,"line":2926},31,[2928,2932],{"type":46,"tag":72,"props":2929,"children":2930},{"style":114},[2931],{"type":51,"value":503},{"type":46,"tag":72,"props":2933,"children":2934},{"style":120},[2935],{"type":51,"value":900},{"type":46,"tag":47,"props":2937,"children":2938},{},[2939,2941,2946],{"type":51,"value":2940},"It will first display a launch page with a button to start the service. When user click the button, the ",{"type":46,"tag":54,"props":2942,"children":2943},{"className":40},[2944],{"type":51,"value":2945},"handle()",{"type":51,"value":2947}," will be called, and the view will be updated to iframe.",{"type":46,"tag":47,"props":2949,"children":2950},{},[2951,2953,2958,2960,2964],{"type":51,"value":2952},"When you need to refresh the custom tabs, you can call ",{"type":46,"tag":54,"props":2954,"children":2955},{"className":40},[2956],{"type":51,"value":2957},"nuxt.callHook('devtools:customTabs:refresh')",{"type":51,"value":2959}," and the hooks on ",{"type":46,"tag":54,"props":2961,"children":2962},{"className":40},[2963],{"type":51,"value":195},{"type":51,"value":2965}," will be revaluated again.",{"type":46,"tag":168,"props":2967,"children":2969},{"id":2968},"api-for-custom-view",[2970],{"type":51,"value":2971},"API for Custom View",{"type":46,"tag":47,"props":2973,"children":2974},{},[2975,2977,2983],{"type":51,"value":2976},"Please refer to ",{"type":46,"tag":1119,"props":2978,"children":2980},{"href":2979},"/module/utils-kit#nuxtdevtools-kitiframe-client",[2981],{"type":51,"value":2982},"Iframe Client",{"type":51,"value":60},{"type":46,"tag":168,"props":2985,"children":2987},{"id":2986},"custom-rpc-functions",[2988],{"type":51,"value":2989},"Custom RPC Functions",{"type":46,"tag":47,"props":2991,"children":2992},{},[2993],{"type":51,"value":2994},"Nuxt DevTools uses Remote Procedure Call (RPC) to communicate between the server and client. For modules you can also leverage that to communicate your server code.",{"type":46,"tag":47,"props":2996,"children":2997},{},[2998],{"type":51,"value":2999},"To do that, we recommend to define your types in a shared TypeScript file first:",{"type":46,"tag":62,"props":3001,"children":3003},{"className":96,"code":3002,"language":98,"meta":40,"style":40},"// rpc-types.ts\n\nexport interface ServerFunctions {\n getMyModuleOptions(): MyModuleOptions\n}\n\nexport interface ClientFunctions {\n showNotification(message: string): void\n}\n",[3004],{"type":46,"tag":54,"props":3005,"children":3006},{"__ignoreMap":40},[3007,3015,3018,3039,3057,3064,3067,3087,3123],{"type":46,"tag":72,"props":3008,"children":3009},{"class":74,"line":75},[3010],{"type":46,"tag":72,"props":3011,"children":3012},{"style":285},[3013],{"type":51,"value":3014},"// rpc-types.ts",{"type":46,"tag":72,"props":3016,"children":3017},{"class":74,"line":241},[],{"type":46,"tag":72,"props":3019,"children":3020},{"class":74,"line":245},[3021,3025,3030,3035],{"type":46,"tag":72,"props":3022,"children":3023},{"style":108},[3024],{"type":51,"value":1198},{"type":46,"tag":72,"props":3026,"children":3027},{"style":265},[3028],{"type":51,"value":3029}," interface",{"type":46,"tag":72,"props":3031,"children":3032},{"style":79},[3033],{"type":51,"value":3034}," ServerFunctions",{"type":46,"tag":72,"props":3036,"children":3037},{"style":114},[3038],{"type":51,"value":117},{"type":46,"tag":72,"props":3040,"children":3041},{"class":74,"line":281},[3042,3047,3052],{"type":46,"tag":72,"props":3043,"children":3044},{"style":295},[3045],{"type":51,"value":3046}," getMyModuleOptions",{"type":46,"tag":72,"props":3048,"children":3049},{"style":114},[3050],{"type":51,"value":3051},"():",{"type":46,"tag":72,"props":3053,"children":3054},{"style":79},[3055],{"type":51,"value":3056}," MyModuleOptions",{"type":46,"tag":72,"props":3058,"children":3059},{"class":74,"line":291},[3060],{"type":46,"tag":72,"props":3061,"children":3062},{"style":114},[3063],{"type":51,"value":503},{"type":46,"tag":72,"props":3065,"children":3066},{"class":74,"line":324},[],{"type":46,"tag":72,"props":3068,"children":3069},{"class":74,"line":333},[3070,3074,3078,3083],{"type":46,"tag":72,"props":3071,"children":3072},{"style":108},[3073],{"type":51,"value":1198},{"type":46,"tag":72,"props":3075,"children":3076},{"style":265},[3077],{"type":51,"value":3029},{"type":46,"tag":72,"props":3079,"children":3080},{"style":79},[3081],{"type":51,"value":3082}," ClientFunctions",{"type":46,"tag":72,"props":3084,"children":3085},{"style":114},[3086],{"type":51,"value":117},{"type":46,"tag":72,"props":3088,"children":3089},{"class":74,"line":363},[3090,3095,3099,3104,3108,3113,3118],{"type":46,"tag":72,"props":3091,"children":3092},{"style":295},[3093],{"type":51,"value":3094}," showNotification",{"type":46,"tag":72,"props":3096,"children":3097},{"style":114},[3098],{"type":51,"value":257},{"type":46,"tag":72,"props":3100,"children":3101},{"style":1512},[3102],{"type":51,"value":3103},"message",{"type":46,"tag":72,"props":3105,"children":3106},{"style":114},[3107],{"type":51,"value":303},{"type":46,"tag":72,"props":3109,"children":3110},{"style":79},[3111],{"type":51,"value":3112}," string",{"type":46,"tag":72,"props":3114,"children":3115},{"style":114},[3116],{"type":51,"value":3117},"):",{"type":46,"tag":72,"props":3119,"children":3120},{"style":79},[3121],{"type":51,"value":3122}," void",{"type":46,"tag":72,"props":3124,"children":3125},{"class":74,"line":372},[3126],{"type":46,"tag":72,"props":3127,"children":3128},{"style":114},[3129],{"type":51,"value":503},{"type":46,"tag":47,"props":3131,"children":3132},{},[3133],{"type":51,"value":3134},"And then in your module code:",{"type":46,"tag":62,"props":3136,"children":3138},{"className":96,"code":3137,"language":98,"meta":40,"style":40},"import { defineNuxtModule } from '@nuxt/kit'\nimport { extendServerRpc, onDevToolsInitialized } from '@nuxt/devtools-kit'\nimport type { ClientFunctions, ServerFunctions } from './rpc-types'\n\nconst RPC_NAMESPACE = 'my-module-rpc'\n\nexport default defineNuxtModule({\n setup(options, nuxt) {\n // wait for DevTools to be initialized\n onDevToolsInitialized(async () => {\n const rpc = extendServerRpc\u003CClientFunctions, ServerFunctions>(RPC_NAMESPACE, {\n // register server RPC functions\n getMyModuleOptions() {\n return options\n },\n })\n\n // call client RPC functions\n // since it might have multiple clients connected, we use `broadcast` to call all of them\n await rpc.broadcast.showNotification('Hello from My Module!')\n })\n }\n})\n",[3139],{"type":46,"tag":54,"props":3140,"children":3141},{"__ignoreMap":40},[3142,3178,3222,3271,3274,3303,3306,3330,3364,3372,3401,3460,3468,3484,3497,3504,3516,3519,3527,3535,3586,3598,3605],{"type":46,"tag":72,"props":3143,"children":3144},{"class":74,"line":75},[3145,3149,3153,3158,3162,3166,3170,3174],{"type":46,"tag":72,"props":3146,"children":3147},{"style":108},[3148],{"type":51,"value":111},{"type":46,"tag":72,"props":3150,"children":3151},{"style":114},[3152],{"type":51,"value":117},{"type":46,"tag":72,"props":3154,"children":3155},{"style":120},[3156],{"type":51,"value":3157}," defineNuxtModule",{"type":46,"tag":72,"props":3159,"children":3160},{"style":114},[3161],{"type":51,"value":128},{"type":46,"tag":72,"props":3163,"children":3164},{"style":108},[3165],{"type":51,"value":133},{"type":46,"tag":72,"props":3167,"children":3168},{"style":114},[3169],{"type":51,"value":138},{"type":46,"tag":72,"props":3171,"children":3172},{"style":85},[3173],{"type":51,"value":58},{"type":46,"tag":72,"props":3175,"children":3176},{"style":114},[3177],{"type":51,"value":148},{"type":46,"tag":72,"props":3179,"children":3180},{"class":74,"line":241},[3181,3185,3189,3193,3197,3202,3206,3210,3214,3218],{"type":46,"tag":72,"props":3182,"children":3183},{"style":108},[3184],{"type":51,"value":111},{"type":46,"tag":72,"props":3186,"children":3187},{"style":114},[3188],{"type":51,"value":117},{"type":46,"tag":72,"props":3190,"children":3191},{"style":120},[3192],{"type":51,"value":985},{"type":46,"tag":72,"props":3194,"children":3195},{"style":114},[3196],{"type":51,"value":321},{"type":46,"tag":72,"props":3198,"children":3199},{"style":120},[3200],{"type":51,"value":3201}," onDevToolsInitialized",{"type":46,"tag":72,"props":3203,"children":3204},{"style":114},[3205],{"type":51,"value":128},{"type":46,"tag":72,"props":3207,"children":3208},{"style":108},[3209],{"type":51,"value":133},{"type":46,"tag":72,"props":3211,"children":3212},{"style":114},[3213],{"type":51,"value":138},{"type":46,"tag":72,"props":3215,"children":3216},{"style":85},[3217],{"type":51,"value":143},{"type":46,"tag":72,"props":3219,"children":3220},{"style":114},[3221],{"type":51,"value":148},{"type":46,"tag":72,"props":3223,"children":3224},{"class":74,"line":245},[3225,3229,3234,3238,3242,3246,3250,3254,3258,3262,3267],{"type":46,"tag":72,"props":3226,"children":3227},{"style":108},[3228],{"type":51,"value":111},{"type":46,"tag":72,"props":3230,"children":3231},{"style":108},[3232],{"type":51,"value":3233}," type",{"type":46,"tag":72,"props":3235,"children":3236},{"style":114},[3237],{"type":51,"value":117},{"type":46,"tag":72,"props":3239,"children":3240},{"style":120},[3241],{"type":51,"value":3082},{"type":46,"tag":72,"props":3243,"children":3244},{"style":114},[3245],{"type":51,"value":321},{"type":46,"tag":72,"props":3247,"children":3248},{"style":120},[3249],{"type":51,"value":3034},{"type":46,"tag":72,"props":3251,"children":3252},{"style":114},[3253],{"type":51,"value":128},{"type":46,"tag":72,"props":3255,"children":3256},{"style":108},[3257],{"type":51,"value":133},{"type":46,"tag":72,"props":3259,"children":3260},{"style":114},[3261],{"type":51,"value":138},{"type":46,"tag":72,"props":3263,"children":3264},{"style":85},[3265],{"type":51,"value":3266},"./rpc-types",{"type":46,"tag":72,"props":3268,"children":3269},{"style":114},[3270],{"type":51,"value":148},{"type":46,"tag":72,"props":3272,"children":3273},{"class":74,"line":281},[],{"type":46,"tag":72,"props":3275,"children":3276},{"class":74,"line":291},[3277,3281,3286,3290,3294,3299],{"type":46,"tag":72,"props":3278,"children":3279},{"style":265},[3280],{"type":51,"value":604},{"type":46,"tag":72,"props":3282,"children":3283},{"style":120},[3284],{"type":51,"value":3285}," RPC_NAMESPACE ",{"type":46,"tag":72,"props":3287,"children":3288},{"style":114},[3289],{"type":51,"value":614},{"type":46,"tag":72,"props":3291,"children":3292},{"style":114},[3293],{"type":51,"value":138},{"type":46,"tag":72,"props":3295,"children":3296},{"style":85},[3297],{"type":51,"value":3298},"my-module-rpc",{"type":46,"tag":72,"props":3300,"children":3301},{"style":114},[3302],{"type":51,"value":148},{"type":46,"tag":72,"props":3304,"children":3305},{"class":74,"line":324},[],{"type":46,"tag":72,"props":3307,"children":3308},{"class":74,"line":333},[3309,3313,3318,3322,3326],{"type":46,"tag":72,"props":3310,"children":3311},{"style":108},[3312],{"type":51,"value":1198},{"type":46,"tag":72,"props":3314,"children":3315},{"style":108},[3316],{"type":51,"value":3317}," default",{"type":46,"tag":72,"props":3319,"children":3320},{"style":249},[3321],{"type":51,"value":3157},{"type":46,"tag":72,"props":3323,"children":3324},{"style":120},[3325],{"type":51,"value":257},{"type":46,"tag":72,"props":3327,"children":3328},{"style":114},[3329],{"type":51,"value":278},{"type":46,"tag":72,"props":3331,"children":3332},{"class":74,"line":363},[3333,3338,3342,3347,3351,3356,3360],{"type":46,"tag":72,"props":3334,"children":3335},{"style":295},[3336],{"type":51,"value":3337}," setup",{"type":46,"tag":72,"props":3339,"children":3340},{"style":114},[3341],{"type":51,"value":257},{"type":46,"tag":72,"props":3343,"children":3344},{"style":1512},[3345],{"type":51,"value":3346},"options",{"type":46,"tag":72,"props":3348,"children":3349},{"style":114},[3350],{"type":51,"value":321},{"type":46,"tag":72,"props":3352,"children":3353},{"style":1512},[3354],{"type":51,"value":3355}," nuxt",{"type":46,"tag":72,"props":3357,"children":3358},{"style":114},[3359],{"type":51,"value":900},{"type":46,"tag":72,"props":3361,"children":3362},{"style":114},[3363],{"type":51,"value":117},{"type":46,"tag":72,"props":3365,"children":3366},{"class":74,"line":372},[3367],{"type":46,"tag":72,"props":3368,"children":3369},{"style":285},[3370],{"type":51,"value":3371}," // wait for DevTools to be initialized",{"type":46,"tag":72,"props":3373,"children":3374},{"class":74,"line":402},[3375,3380,3384,3388,3393,3397],{"type":46,"tag":72,"props":3376,"children":3377},{"style":249},[3378],{"type":51,"value":3379}," onDevToolsInitialized",{"type":46,"tag":72,"props":3381,"children":3382},{"style":295},[3383],{"type":51,"value":257},{"type":46,"tag":72,"props":3385,"children":3386},{"style":265},[3387],{"type":51,"value":1505},{"type":46,"tag":72,"props":3389,"children":3390},{"style":114},[3391],{"type":51,"value":3392}," ()",{"type":46,"tag":72,"props":3394,"children":3395},{"style":265},[3396],{"type":51,"value":268},{"type":46,"tag":72,"props":3398,"children":3399},{"style":114},[3400],{"type":51,"value":117},{"type":46,"tag":72,"props":3402,"children":3403},{"class":74,"line":411},[3404,3409,3414,3418,3422,3426,3431,3435,3439,3443,3447,3452,3456],{"type":46,"tag":72,"props":3405,"children":3406},{"style":265},[3407],{"type":51,"value":3408}," const",{"type":46,"tag":72,"props":3410,"children":3411},{"style":120},[3412],{"type":51,"value":3413}," rpc",{"type":46,"tag":72,"props":3415,"children":3416},{"style":114},[3417],{"type":51,"value":1556},{"type":46,"tag":72,"props":3419,"children":3420},{"style":249},[3421],{"type":51,"value":985},{"type":46,"tag":72,"props":3423,"children":3424},{"style":114},[3425],{"type":51,"value":2359},{"type":46,"tag":72,"props":3427,"children":3428},{"style":79},[3429],{"type":51,"value":3430},"ClientFunctions",{"type":46,"tag":72,"props":3432,"children":3433},{"style":114},[3434],{"type":51,"value":321},{"type":46,"tag":72,"props":3436,"children":3437},{"style":79},[3438],{"type":51,"value":3034},{"type":46,"tag":72,"props":3440,"children":3441},{"style":114},[3442],{"type":51,"value":2369},{"type":46,"tag":72,"props":3444,"children":3445},{"style":295},[3446],{"type":51,"value":257},{"type":46,"tag":72,"props":3448,"children":3449},{"style":120},[3450],{"type":51,"value":3451},"RPC_NAMESPACE",{"type":46,"tag":72,"props":3453,"children":3454},{"style":114},[3455],{"type":51,"value":321},{"type":46,"tag":72,"props":3457,"children":3458},{"style":114},[3459],{"type":51,"value":117},{"type":46,"tag":72,"props":3461,"children":3462},{"class":74,"line":428},[3463],{"type":46,"tag":72,"props":3464,"children":3465},{"style":285},[3466],{"type":51,"value":3467}," // register server RPC functions",{"type":46,"tag":72,"props":3469,"children":3470},{"class":74,"line":458},[3471,3476,3480],{"type":46,"tag":72,"props":3472,"children":3473},{"style":295},[3474],{"type":51,"value":3475}," getMyModuleOptions",{"type":46,"tag":72,"props":3477,"children":3478},{"style":114},[3479],{"type":51,"value":262},{"type":46,"tag":72,"props":3481,"children":3482},{"style":114},[3483],{"type":51,"value":117},{"type":46,"tag":72,"props":3485,"children":3486},{"class":74,"line":488},[3487,3492],{"type":46,"tag":72,"props":3488,"children":3489},{"style":108},[3490],{"type":51,"value":3491}," return",{"type":46,"tag":72,"props":3493,"children":3494},{"style":120},[3495],{"type":51,"value":3496}," options",{"type":46,"tag":72,"props":3498,"children":3499},{"class":74,"line":497},[3500],{"type":46,"tag":72,"props":3501,"children":3502},{"style":114},[3503],{"type":51,"value":2911},{"type":46,"tag":72,"props":3505,"children":3506},{"class":74,"line":856},[3507,3512],{"type":46,"tag":72,"props":3508,"children":3509},{"style":114},[3510],{"type":51,"value":3511}," }",{"type":46,"tag":72,"props":3513,"children":3514},{"style":295},[3515],{"type":51,"value":900},{"type":46,"tag":72,"props":3517,"children":3518},{"class":74,"line":886},[],{"type":46,"tag":72,"props":3520,"children":3521},{"class":74,"line":894},[3522],{"type":46,"tag":72,"props":3523,"children":3524},{"style":285},[3525],{"type":51,"value":3526}," // call client RPC functions",{"type":46,"tag":72,"props":3528,"children":3529},{"class":74,"line":2689},[3530],{"type":46,"tag":72,"props":3531,"children":3532},{"style":285},[3533],{"type":51,"value":3534}," // since it might have multiple clients connected, we use `broadcast` to call all of them",{"type":46,"tag":72,"props":3536,"children":3537},{"class":74,"line":2718},[3538,3543,3547,3551,3556,3560,3565,3569,3573,3578,3582],{"type":46,"tag":72,"props":3539,"children":3540},{"style":108},[3541],{"type":51,"value":3542}," await",{"type":46,"tag":72,"props":3544,"children":3545},{"style":120},[3546],{"type":51,"value":3413},{"type":46,"tag":72,"props":3548,"children":3549},{"style":114},[3550],{"type":51,"value":60},{"type":46,"tag":72,"props":3552,"children":3553},{"style":120},[3554],{"type":51,"value":3555},"broadcast",{"type":46,"tag":72,"props":3557,"children":3558},{"style":114},[3559],{"type":51,"value":60},{"type":46,"tag":72,"props":3561,"children":3562},{"style":249},[3563],{"type":51,"value":3564},"showNotification",{"type":46,"tag":72,"props":3566,"children":3567},{"style":295},[3568],{"type":51,"value":257},{"type":46,"tag":72,"props":3570,"children":3571},{"style":114},[3572],{"type":51,"value":148},{"type":46,"tag":72,"props":3574,"children":3575},{"style":85},[3576],{"type":51,"value":3577},"Hello from My Module!",{"type":46,"tag":72,"props":3579,"children":3580},{"style":114},[3581],{"type":51,"value":148},{"type":46,"tag":72,"props":3583,"children":3584},{"style":295},[3585],{"type":51,"value":900},{"type":46,"tag":72,"props":3587,"children":3588},{"class":74,"line":2748},[3589,3594],{"type":46,"tag":72,"props":3590,"children":3591},{"style":114},[3592],{"type":51,"value":3593}," }",{"type":46,"tag":72,"props":3595,"children":3596},{"style":295},[3597],{"type":51,"value":900},{"type":46,"tag":72,"props":3599,"children":3600},{"class":74,"line":2769},[3601],{"type":46,"tag":72,"props":3602,"children":3603},{"style":114},[3604],{"type":51,"value":2267},{"type":46,"tag":72,"props":3606,"children":3607},{"class":74,"line":2799},[3608,3612],{"type":46,"tag":72,"props":3609,"children":3610},{"style":114},[3611],{"type":51,"value":503},{"type":46,"tag":72,"props":3613,"children":3614},{"style":120},[3615],{"type":51,"value":900},{"type":46,"tag":47,"props":3617,"children":3618},{},[3619],{"type":51,"value":3620},"And on the client side, you can do:",{"type":46,"tag":62,"props":3622,"children":3624},{"className":96,"code":3623,"language":98,"meta":40,"style":40},"import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'\nimport type { ClientFunctions, ServerFunctions } from './rpc-types'\n\nconst RPC_NAMESPACE = 'my-module-rpc'\n\nonDevtoolsClientConnected(async (client) => {\n const rpc = client.devtools.extendClientRpc(RPC_NAMESPACE, {\n showNotification(message) {\n console.log(message)\n },\n })\n\n // call server RPC functions\n const options = await rpc.getMyModuleOptions()\n})\n",[3625],{"type":46,"tag":54,"props":3626,"children":3627},{"__ignoreMap":40},[3628,3663,3710,3713,3740,3743,3778,3830,3854,3883,3890,3901,3904,3912,3949],{"type":46,"tag":72,"props":3629,"children":3630},{"class":74,"line":75},[3631,3635,3639,3643,3647,3651,3655,3659],{"type":46,"tag":72,"props":3632,"children":3633},{"style":108},[3634],{"type":51,"value":111},{"type":46,"tag":72,"props":3636,"children":3637},{"style":114},[3638],{"type":51,"value":117},{"type":46,"tag":72,"props":3640,"children":3641},{"style":120},[3642],{"type":51,"value":1465},{"type":46,"tag":72,"props":3644,"children":3645},{"style":114},[3646],{"type":51,"value":128},{"type":46,"tag":72,"props":3648,"children":3649},{"style":108},[3650],{"type":51,"value":133},{"type":46,"tag":72,"props":3652,"children":3653},{"style":114},[3654],{"type":51,"value":138},{"type":46,"tag":72,"props":3656,"children":3657},{"style":85},[3658],{"type":51,"value":1134},{"type":46,"tag":72,"props":3660,"children":3661},{"style":114},[3662],{"type":51,"value":148},{"type":46,"tag":72,"props":3664,"children":3665},{"class":74,"line":241},[3666,3670,3674,3678,3682,3686,3690,3694,3698,3702,3706],{"type":46,"tag":72,"props":3667,"children":3668},{"style":108},[3669],{"type":51,"value":111},{"type":46,"tag":72,"props":3671,"children":3672},{"style":108},[3673],{"type":51,"value":3233},{"type":46,"tag":72,"props":3675,"children":3676},{"style":114},[3677],{"type":51,"value":117},{"type":46,"tag":72,"props":3679,"children":3680},{"style":120},[3681],{"type":51,"value":3082},{"type":46,"tag":72,"props":3683,"children":3684},{"style":114},[3685],{"type":51,"value":321},{"type":46,"tag":72,"props":3687,"children":3688},{"style":120},[3689],{"type":51,"value":3034},{"type":46,"tag":72,"props":3691,"children":3692},{"style":114},[3693],{"type":51,"value":128},{"type":46,"tag":72,"props":3695,"children":3696},{"style":108},[3697],{"type":51,"value":133},{"type":46,"tag":72,"props":3699,"children":3700},{"style":114},[3701],{"type":51,"value":138},{"type":46,"tag":72,"props":3703,"children":3704},{"style":85},[3705],{"type":51,"value":3266},{"type":46,"tag":72,"props":3707,"children":3708},{"style":114},[3709],{"type":51,"value":148},{"type":46,"tag":72,"props":3711,"children":3712},{"class":74,"line":245},[],{"type":46,"tag":72,"props":3714,"children":3715},{"class":74,"line":281},[3716,3720,3724,3728,3732,3736],{"type":46,"tag":72,"props":3717,"children":3718},{"style":265},[3719],{"type":51,"value":604},{"type":46,"tag":72,"props":3721,"children":3722},{"style":120},[3723],{"type":51,"value":3285},{"type":46,"tag":72,"props":3725,"children":3726},{"style":114},[3727],{"type":51,"value":614},{"type":46,"tag":72,"props":3729,"children":3730},{"style":114},[3731],{"type":51,"value":138},{"type":46,"tag":72,"props":3733,"children":3734},{"style":85},[3735],{"type":51,"value":3298},{"type":46,"tag":72,"props":3737,"children":3738},{"style":114},[3739],{"type":51,"value":148},{"type":46,"tag":72,"props":3741,"children":3742},{"class":74,"line":291},[],{"type":46,"tag":72,"props":3744,"children":3745},{"class":74,"line":324},[3746,3750,3754,3758,3762,3766,3770,3774],{"type":46,"tag":72,"props":3747,"children":3748},{"style":249},[3749],{"type":51,"value":1496},{"type":46,"tag":72,"props":3751,"children":3752},{"style":120},[3753],{"type":51,"value":257},{"type":46,"tag":72,"props":3755,"children":3756},{"style":265},[3757],{"type":51,"value":1505},{"type":46,"tag":72,"props":3759,"children":3760},{"style":114},[3761],{"type":51,"value":273},{"type":46,"tag":72,"props":3763,"children":3764},{"style":1512},[3765],{"type":51,"value":1515},{"type":46,"tag":72,"props":3767,"children":3768},{"style":114},[3769],{"type":51,"value":900},{"type":46,"tag":72,"props":3771,"children":3772},{"style":265},[3773],{"type":51,"value":268},{"type":46,"tag":72,"props":3775,"children":3776},{"style":114},[3777],{"type":51,"value":117},{"type":46,"tag":72,"props":3779,"children":3780},{"class":74,"line":333},[3781,3785,3789,3793,3797,3801,3805,3809,3814,3818,3822,3826],{"type":46,"tag":72,"props":3782,"children":3783},{"style":265},[3784],{"type":51,"value":1546},{"type":46,"tag":72,"props":3786,"children":3787},{"style":120},[3788],{"type":51,"value":3413},{"type":46,"tag":72,"props":3790,"children":3791},{"style":114},[3792],{"type":51,"value":1556},{"type":46,"tag":72,"props":3794,"children":3795},{"style":120},[3796],{"type":51,"value":1561},{"type":46,"tag":72,"props":3798,"children":3799},{"style":114},[3800],{"type":51,"value":60},{"type":46,"tag":72,"props":3802,"children":3803},{"style":120},[3804],{"type":51,"value":1298},{"type":46,"tag":72,"props":3806,"children":3807},{"style":114},[3808],{"type":51,"value":60},{"type":46,"tag":72,"props":3810,"children":3811},{"style":249},[3812],{"type":51,"value":3813},"extendClientRpc",{"type":46,"tag":72,"props":3815,"children":3816},{"style":295},[3817],{"type":51,"value":257},{"type":46,"tag":72,"props":3819,"children":3820},{"style":120},[3821],{"type":51,"value":3451},{"type":46,"tag":72,"props":3823,"children":3824},{"style":114},[3825],{"type":51,"value":321},{"type":46,"tag":72,"props":3827,"children":3828},{"style":114},[3829],{"type":51,"value":117},{"type":46,"tag":72,"props":3831,"children":3832},{"class":74,"line":363},[3833,3838,3842,3846,3850],{"type":46,"tag":72,"props":3834,"children":3835},{"style":295},[3836],{"type":51,"value":3837}," showNotification",{"type":46,"tag":72,"props":3839,"children":3840},{"style":114},[3841],{"type":51,"value":257},{"type":46,"tag":72,"props":3843,"children":3844},{"style":1512},[3845],{"type":51,"value":3103},{"type":46,"tag":72,"props":3847,"children":3848},{"style":114},[3849],{"type":51,"value":900},{"type":46,"tag":72,"props":3851,"children":3852},{"style":114},[3853],{"type":51,"value":117},{"type":46,"tag":72,"props":3855,"children":3856},{"class":74,"line":372},[3857,3862,3866,3871,3875,3879],{"type":46,"tag":72,"props":3858,"children":3859},{"style":120},[3860],{"type":51,"value":3861}," console",{"type":46,"tag":72,"props":3863,"children":3864},{"style":114},[3865],{"type":51,"value":60},{"type":46,"tag":72,"props":3867,"children":3868},{"style":249},[3869],{"type":51,"value":3870},"log",{"type":46,"tag":72,"props":3872,"children":3873},{"style":295},[3874],{"type":51,"value":257},{"type":46,"tag":72,"props":3876,"children":3877},{"style":120},[3878],{"type":51,"value":3103},{"type":46,"tag":72,"props":3880,"children":3881},{"style":295},[3882],{"type":51,"value":900},{"type":46,"tag":72,"props":3884,"children":3885},{"class":74,"line":402},[3886],{"type":46,"tag":72,"props":3887,"children":3888},{"style":114},[3889],{"type":51,"value":2259},{"type":46,"tag":72,"props":3891,"children":3892},{"class":74,"line":411},[3893,3897],{"type":46,"tag":72,"props":3894,"children":3895},{"style":114},[3896],{"type":51,"value":2267},{"type":46,"tag":72,"props":3898,"children":3899},{"style":295},[3900],{"type":51,"value":900},{"type":46,"tag":72,"props":3902,"children":3903},{"class":74,"line":428},[],{"type":46,"tag":72,"props":3905,"children":3906},{"class":74,"line":458},[3907],{"type":46,"tag":72,"props":3908,"children":3909},{"style":285},[3910],{"type":51,"value":3911}," // call server RPC functions",{"type":46,"tag":72,"props":3913,"children":3914},{"class":74,"line":488},[3915,3919,3923,3927,3932,3936,3940,3945],{"type":46,"tag":72,"props":3916,"children":3917},{"style":265},[3918],{"type":51,"value":1546},{"type":46,"tag":72,"props":3920,"children":3921},{"style":120},[3922],{"type":51,"value":3496},{"type":46,"tag":72,"props":3924,"children":3925},{"style":114},[3926],{"type":51,"value":1556},{"type":46,"tag":72,"props":3928,"children":3929},{"style":108},[3930],{"type":51,"value":3931}," await",{"type":46,"tag":72,"props":3933,"children":3934},{"style":120},[3935],{"type":51,"value":3413},{"type":46,"tag":72,"props":3937,"children":3938},{"style":114},[3939],{"type":51,"value":60},{"type":46,"tag":72,"props":3941,"children":3942},{"style":249},[3943],{"type":51,"value":3944},"getMyModuleOptions",{"type":46,"tag":72,"props":3946,"children":3947},{"style":295},[3948],{"type":51,"value":262},{"type":46,"tag":72,"props":3950,"children":3951},{"class":74,"line":497},[3952,3956],{"type":46,"tag":72,"props":3953,"children":3954},{"style":114},[3955],{"type":51,"value":503},{"type":46,"tag":72,"props":3957,"children":3958},{"style":120},[3959],{"type":51,"value":900},{"type":46,"tag":168,"props":3961,"children":3963},{"id":3962},"trying-local-changes",[3964],{"type":51,"value":3965},"Trying Local Changes",{"type":46,"tag":47,"props":3967,"children":3968},{},[3969],{"type":51,"value":3970},"You can clone Nuxt DevTools repo and try your changes locally.",{"type":46,"tag":47,"props":3972,"children":3973},{},[3974,3975,3980],{"type":51,"value":2976},{"type":46,"tag":1119,"props":3976,"children":3978},{"href":3977},"/development/contributing#trying-local-changes",[3979],{"type":51,"value":3965},{"type":51,"value":60},{"type":46,"tag":168,"props":3982,"children":3984},{"id":3983},"examples",[3985],{"type":51,"value":3986},"Examples",{"type":46,"tag":47,"props":3988,"children":3989},{},[3990],{"type":51,"value":3991},"Here are a few examples of how to integrate Nuxt DevTools in modules:",{"type":46,"tag":1277,"props":3993,"children":3994},{},[3995,4006,4016,4026,4036],{"type":46,"tag":1281,"props":3996,"children":3997},{},[3998],{"type":46,"tag":1119,"props":3999,"children":4003},{"href":4000,"rel":4001},"https://github.com/nuxt/devtools/blob/main/packages/devtools/src/integrations/vscode.ts",[4002],"nofollow",[4004],{"type":51,"value":4005},"Built-in VS Code integration with lazy initialize",{"type":46,"tag":1281,"props":4007,"children":4008},{},[4009],{"type":46,"tag":1119,"props":4010,"children":4013},{"href":4011,"rel":4012},"https://github.com/vueuse/vueuse/blob/ce28cef154489c73abe308104bef8568594a9bcd/packages/nuxt/index.ts#L89-L99",[4002],[4014],{"type":51,"value":4015},"VueUse adds a docs tab",{"type":46,"tag":1281,"props":4017,"children":4018},{},[4019],{"type":46,"tag":1119,"props":4020,"children":4023},{"href":4021,"rel":4022},"https://github.com/unocss/unocss/blob/25021a751494e99e85cfd82cca3855cdf78f6a12/packages/nuxt/src/index.ts#L81-L94",[4002],[4024],{"type":51,"value":4025},"UnoCSS Inspector",{"type":46,"tag":1281,"props":4027,"children":4028},{},[4029],{"type":46,"tag":1119,"props":4030,"children":4033},{"href":4031,"rel":4032},"https://github.com/danielroe/nuxt-vitest/blob/7bac68d96f27dea6c30c198b7caaaf0b495574ab/packages/nuxt-vitest/src/module.ts#L139-L181",[4002],[4034],{"type":51,"value":4035},"Nuxt Vitest runner",{"type":46,"tag":1281,"props":4037,"children":4038},{},[4039],{"type":46,"tag":1119,"props":4040,"children":4043},{"href":4041,"rel":4042},"https://github.com/harlan-zw/nuxt-og-image/blob/main/src/module.ts#L136",[4002],[4044],{"type":51,"value":4045},"Nuxt OG Image Playground",{"type":46,"tag":1612,"props":4047,"children":4048},{},[4049],{"type":51,"value":1616},{"title":40,"searchDepth":241,"depth":241,"links":4051},[4052,4053,4054,4055,4056,4057,4058],{"id":1646,"depth":241,"text":1649},{"id":1702,"depth":241,"text":1705},{"id":2295,"depth":241,"text":2298},{"id":2968,"depth":241,"text":2971},{"id":2986,"depth":241,"text":2989},{"id":3962,"depth":241,"text":3965},{"id":3983,"depth":241,"text":3986},"content:2.module:0.guide.md","2.module/0.guide.md",{"_path":29,"_dir":38,"_draft":39,"_partial":39,"_locale":40,"title":28,"description":4062,"body":4063,"_type":1629,"_id":4918,"_source":1631,"_file":4919,"_extension":1633},"UI Kit is for module authors to build a custom view.",{"type":43,"children":4064,"toc":4910},[4065,4081,4097,4103,4115,4121,4144,4227,4233,4262,4274,4323,4360,4403,4408,4451,4456,4589,4603,4609,4622,4628,4641,4646,4893,4906],{"type":46,"tag":4066,"props":4067,"children":4068},"callout",{},[4069],{"type":46,"tag":47,"props":4070,"children":4071},{},[4072,4074,4079],{"type":51,"value":4073},"We suggest you to read the ",{"type":46,"tag":1119,"props":4075,"children":4076},{"href":23},[4077],{"type":51,"value":4078},"Module Authors Guide",{"type":51,"value":4080}," first.",{"type":46,"tag":47,"props":4082,"children":4083},{},[4084,4086,4096],{"type":51,"value":4085},"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":1119,"props":4087,"children":4090},{"href":4088,"rel":4089},"https://github.com/nuxt/devtools/tree/main/packages/devtools-ui-kit",[4002],[4091],{"type":46,"tag":54,"props":4092,"children":4093},{"className":40},[4094],{"type":51,"value":4095},"packages/devtools-ui-kit",{"type":51,"value":60},{"type":46,"tag":168,"props":4098,"children":4100},{"id":4099},"installation",[4101],{"type":51,"value":4102},"Installation",{"type":46,"tag":47,"props":4104,"children":4105},{},[4106,4108,4113],{"type":51,"value":4107},"We recommend to use the ",{"type":46,"tag":1119,"props":4109,"children":4111},{"href":4110},"/module/guide#starter-template",[4112],{"type":51,"value":1649},{"type":51,"value":4114}," for authoring a DevTools integration for your module, which has the set up built in and ready to use.",{"type":46,"tag":177,"props":4116,"children":4118},{"id":4117},"manual-install",[4119],{"type":51,"value":4120},"Manual Install",{"type":46,"tag":62,"props":4122,"children":4124},{"className":64,"code":4123,"language":66,"meta":40,"style":40},"npm i @nuxt/devtools-ui-kit\n",[4125],{"type":46,"tag":54,"props":4126,"children":4127},{"__ignoreMap":40},[4128],{"type":46,"tag":72,"props":4129,"children":4130},{"class":74,"line":75},[4131,4135,4139],{"type":46,"tag":72,"props":4132,"children":4133},{"style":79},[4134],{"type":51,"value":82},{"type":46,"tag":72,"props":4136,"children":4137},{"style":85},[4138],{"type":51,"value":88},{"type":46,"tag":72,"props":4140,"children":4141},{"style":85},[4142],{"type":51,"value":4143}," @nuxt/devtools-ui-kit",{"type":46,"tag":62,"props":4145,"children":4147},{"className":96,"code":4146,"language":98,"meta":40,"style":40},"export default defineNuxtConfig({\n modules: [\n '@nuxt/devtools-ui-kit'\n ]\n})\n",[4148],{"type":46,"tag":54,"props":4149,"children":4150},{"__ignoreMap":40},[4151,4175,4191,4208,4216],{"type":46,"tag":72,"props":4152,"children":4153},{"class":74,"line":75},[4154,4158,4162,4167,4171],{"type":46,"tag":72,"props":4155,"children":4156},{"style":108},[4157],{"type":51,"value":1198},{"type":46,"tag":72,"props":4159,"children":4160},{"style":108},[4161],{"type":51,"value":3317},{"type":46,"tag":72,"props":4163,"children":4164},{"style":249},[4165],{"type":51,"value":4166}," defineNuxtConfig",{"type":46,"tag":72,"props":4168,"children":4169},{"style":120},[4170],{"type":51,"value":257},{"type":46,"tag":72,"props":4172,"children":4173},{"style":114},[4174],{"type":51,"value":278},{"type":46,"tag":72,"props":4176,"children":4177},{"class":74,"line":241},[4178,4183,4187],{"type":46,"tag":72,"props":4179,"children":4180},{"style":295},[4181],{"type":51,"value":4182}," modules",{"type":46,"tag":72,"props":4184,"children":4185},{"style":114},[4186],{"type":51,"value":303},{"type":46,"tag":72,"props":4188,"children":4189},{"style":120},[4190],{"type":51,"value":676},{"type":46,"tag":72,"props":4192,"children":4193},{"class":74,"line":245},[4194,4199,4204],{"type":46,"tag":72,"props":4195,"children":4196},{"style":114},[4197],{"type":51,"value":4198}," '",{"type":46,"tag":72,"props":4200,"children":4201},{"style":85},[4202],{"type":51,"value":4203},"@nuxt/devtools-ui-kit",{"type":46,"tag":72,"props":4205,"children":4206},{"style":114},[4207],{"type":51,"value":148},{"type":46,"tag":72,"props":4209,"children":4210},{"class":74,"line":281},[4211],{"type":46,"tag":72,"props":4212,"children":4213},{"style":120},[4214],{"type":51,"value":4215}," ]",{"type":46,"tag":72,"props":4217,"children":4218},{"class":74,"line":291},[4219,4223],{"type":46,"tag":72,"props":4220,"children":4221},{"style":114},[4222],{"type":51,"value":503},{"type":46,"tag":72,"props":4224,"children":4225},{"style":120},[4226],{"type":51,"value":900},{"type":46,"tag":168,"props":4228,"children":4230},{"id":4229},"usage",[4231],{"type":51,"value":4232},"Usage",{"type":46,"tag":47,"props":4234,"children":4235},{},[4236,4238,4242,4244,4251,4253,4260],{"type":51,"value":4237},"Under the hood, ",{"type":46,"tag":54,"props":4239,"children":4240},{"className":40},[4241],{"type":51,"value":4203},{"type":51,"value":4243}," is an unbundled component library powered by ",{"type":46,"tag":1119,"props":4245,"children":4248},{"href":4246,"rel":4247},"https://github.com/unocss/unocss",[4002],[4249],{"type":51,"value":4250},"UnoCSS",{"type":51,"value":4252}," and ",{"type":46,"tag":1119,"props":4254,"children":4257},{"href":4255,"rel":4256},"https://vueuse.org/",[4002],[4258],{"type":51,"value":4259},"VueUse",{"type":51,"value":4261},". Components are auto imported.",{"type":46,"tag":47,"props":4263,"children":4264},{},[4265,4267,4272],{"type":51,"value":4266},"In this library, we introduced the ",{"type":46,"tag":54,"props":4268,"children":4269},{"className":40},[4270],{"type":51,"value":4271},"n",{"type":51,"value":4273}," attribute for every component to customize the styles and variations. For example, to make a red button:",{"type":46,"tag":62,"props":4275,"children":4279},{"className":4276,"code":4277,"language":4278,"meta":40,"style":40},"language-html shiki shiki-themes material-theme material-theme-palenight material-theme-lighter","\u003CNButton n=\"red\" />\n","html",[4280],{"type":46,"tag":54,"props":4281,"children":4282},{"__ignoreMap":40},[4283],{"type":46,"tag":72,"props":4284,"children":4285},{"class":74,"line":75},[4286,4290,4295,4300,4304,4309,4314,4318],{"type":46,"tag":72,"props":4287,"children":4288},{"style":114},[4289],{"type":51,"value":2359},{"type":46,"tag":72,"props":4291,"children":4292},{"style":295},[4293],{"type":51,"value":4294},"NButton",{"type":46,"tag":72,"props":4296,"children":4297},{"style":265},[4298],{"type":51,"value":4299}," n",{"type":46,"tag":72,"props":4301,"children":4302},{"style":114},[4303],{"type":51,"value":614},{"type":46,"tag":72,"props":4305,"children":4306},{"style":114},[4307],{"type":51,"value":4308},"\"",{"type":46,"tag":72,"props":4310,"children":4311},{"style":85},[4312],{"type":51,"value":4313},"red",{"type":46,"tag":72,"props":4315,"children":4316},{"style":114},[4317],{"type":51,"value":4308},{"type":46,"tag":72,"props":4319,"children":4320},{"style":114},[4321],{"type":51,"value":4322}," />",{"type":46,"tag":47,"props":4324,"children":4325},{},[4326,4328,4333,4335,4339,4340,4345,4347,4352,4354,4358],{"type":51,"value":4327},"to make it larger, add the size specifier (",{"type":46,"tag":54,"props":4329,"children":4330},{"className":40},[4331],{"type":51,"value":4332},"sm",{"type":51,"value":4334},", ",{"type":46,"tag":54,"props":4336,"children":4337},{"className":40},[4338],{"type":51,"value":1633},{"type":51,"value":4334},{"type":46,"tag":54,"props":4341,"children":4342},{"className":40},[4343],{"type":51,"value":4344},"lg",{"type":51,"value":4346}," or ",{"type":46,"tag":54,"props":4348,"children":4349},{"className":40},[4350],{"type":51,"value":4351},"xl",{"type":51,"value":4353},") the ",{"type":46,"tag":54,"props":4355,"children":4356},{"className":40},[4357],{"type":51,"value":4271},{"type":51,"value":4359}," attribute:",{"type":46,"tag":62,"props":4361,"children":4363},{"className":4276,"code":4362,"language":4278,"meta":40,"style":40},"\u003CNButton n=\"red xl\" />\n",[4364],{"type":46,"tag":54,"props":4365,"children":4366},{"__ignoreMap":40},[4367],{"type":46,"tag":72,"props":4368,"children":4369},{"class":74,"line":75},[4370,4374,4378,4382,4386,4390,4395,4399],{"type":46,"tag":72,"props":4371,"children":4372},{"style":114},[4373],{"type":51,"value":2359},{"type":46,"tag":72,"props":4375,"children":4376},{"style":295},[4377],{"type":51,"value":4294},{"type":46,"tag":72,"props":4379,"children":4380},{"style":265},[4381],{"type":51,"value":4299},{"type":46,"tag":72,"props":4383,"children":4384},{"style":114},[4385],{"type":51,"value":614},{"type":46,"tag":72,"props":4387,"children":4388},{"style":114},[4389],{"type":51,"value":4308},{"type":46,"tag":72,"props":4391,"children":4392},{"style":85},[4393],{"type":51,"value":4394},"red xl",{"type":46,"tag":72,"props":4396,"children":4397},{"style":114},[4398],{"type":51,"value":4308},{"type":46,"tag":72,"props":4400,"children":4401},{"style":114},[4402],{"type":51,"value":4322},{"type":46,"tag":47,"props":4404,"children":4405},{},[4406],{"type":51,"value":4407},"You can apply the same specifiers to any other component, for example:",{"type":46,"tag":62,"props":4409,"children":4411},{"className":4276,"code":4410,"language":4278,"meta":40,"style":40},"\u003CNCheckbox n=\"red xl\" />\n",[4412],{"type":46,"tag":54,"props":4413,"children":4414},{"__ignoreMap":40},[4415],{"type":46,"tag":72,"props":4416,"children":4417},{"class":74,"line":75},[4418,4422,4427,4431,4435,4439,4443,4447],{"type":46,"tag":72,"props":4419,"children":4420},{"style":114},[4421],{"type":51,"value":2359},{"type":46,"tag":72,"props":4423,"children":4424},{"style":295},[4425],{"type":51,"value":4426},"NCheckbox",{"type":46,"tag":72,"props":4428,"children":4429},{"style":265},[4430],{"type":51,"value":4299},{"type":46,"tag":72,"props":4432,"children":4433},{"style":114},[4434],{"type":51,"value":614},{"type":46,"tag":72,"props":4436,"children":4437},{"style":114},[4438],{"type":51,"value":4308},{"type":46,"tag":72,"props":4440,"children":4441},{"style":85},[4442],{"type":51,"value":4394},{"type":46,"tag":72,"props":4444,"children":4445},{"style":114},[4446],{"type":51,"value":4308},{"type":46,"tag":72,"props":4448,"children":4449},{"style":114},[4450],{"type":51,"value":4322},{"type":46,"tag":47,"props":4452,"children":4453},{},[4454],{"type":51,"value":4455},"Apply it to parent components could make a local theme scope",{"type":46,"tag":62,"props":4457,"children":4459},{"className":4276,"code":4458,"language":4278,"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",[4460],{"type":46,"tag":54,"props":4461,"children":4462},{"__ignoreMap":40},[4463,4500,4508,4542,4574],{"type":46,"tag":72,"props":4464,"children":4465},{"class":74,"line":75},[4466,4470,4475,4479,4483,4487,4492,4496],{"type":46,"tag":72,"props":4467,"children":4468},{"style":114},[4469],{"type":51,"value":2359},{"type":46,"tag":72,"props":4471,"children":4472},{"style":295},[4473],{"type":51,"value":4474},"NCard",{"type":46,"tag":72,"props":4476,"children":4477},{"style":265},[4478],{"type":51,"value":4299},{"type":46,"tag":72,"props":4480,"children":4481},{"style":114},[4482],{"type":51,"value":614},{"type":46,"tag":72,"props":4484,"children":4485},{"style":114},[4486],{"type":51,"value":4308},{"type":46,"tag":72,"props":4488,"children":4489},{"style":85},[4490],{"type":51,"value":4491},"green-500",{"type":46,"tag":72,"props":4493,"children":4494},{"style":114},[4495],{"type":51,"value":4308},{"type":46,"tag":72,"props":4497,"children":4498},{"style":114},[4499],{"type":51,"value":2369},{"type":46,"tag":72,"props":4501,"children":4502},{"class":74,"line":241},[4503],{"type":46,"tag":72,"props":4504,"children":4505},{"style":285},[4506],{"type":51,"value":4507}," \u003C!-- both of them are themed green -->",{"type":46,"tag":72,"props":4509,"children":4510},{"class":74,"line":245},[4511,4516,4520,4524,4529,4534,4538],{"type":46,"tag":72,"props":4512,"children":4513},{"style":114},[4514],{"type":51,"value":4515}," \u003C",{"type":46,"tag":72,"props":4517,"children":4518},{"style":295},[4519],{"type":51,"value":4426},{"type":46,"tag":72,"props":4521,"children":4522},{"style":114},[4523],{"type":51,"value":2369},{"type":46,"tag":72,"props":4525,"children":4526},{"style":120},[4527],{"type":51,"value":4528},"i accept the terms & conditions",{"type":46,"tag":72,"props":4530,"children":4531},{"style":114},[4532],{"type":51,"value":4533},"\u003C/",{"type":46,"tag":72,"props":4535,"children":4536},{"style":295},[4537],{"type":51,"value":4426},{"type":46,"tag":72,"props":4539,"children":4540},{"style":114},[4541],{"type":51,"value":2369},{"type":46,"tag":72,"props":4543,"children":4544},{"class":74,"line":281},[4545,4549,4553,4557,4562,4566,4570],{"type":46,"tag":72,"props":4546,"children":4547},{"style":114},[4548],{"type":51,"value":4515},{"type":46,"tag":72,"props":4550,"children":4551},{"style":295},[4552],{"type":51,"value":4294},{"type":46,"tag":72,"props":4554,"children":4555},{"style":114},[4556],{"type":51,"value":2369},{"type":46,"tag":72,"props":4558,"children":4559},{"style":120},[4560],{"type":51,"value":4561},"Submit",{"type":46,"tag":72,"props":4563,"children":4564},{"style":114},[4565],{"type":51,"value":4533},{"type":46,"tag":72,"props":4567,"children":4568},{"style":295},[4569],{"type":51,"value":4294},{"type":46,"tag":72,"props":4571,"children":4572},{"style":114},[4573],{"type":51,"value":2369},{"type":46,"tag":72,"props":4575,"children":4576},{"class":74,"line":291},[4577,4581,4585],{"type":46,"tag":72,"props":4578,"children":4579},{"style":114},[4580],{"type":51,"value":4533},{"type":46,"tag":72,"props":4582,"children":4583},{"style":295},[4584],{"type":51,"value":4474},{"type":46,"tag":72,"props":4586,"children":4587},{"style":114},[4588],{"type":51,"value":2369},{"type":46,"tag":47,"props":4590,"children":4591},{},[4592,4594,4601],{"type":51,"value":4593},"Please check our ",{"type":46,"tag":1119,"props":4595,"children":4598},{"href":4596,"rel":4597},"https://ui-kit.devtools.nuxtjs.org/",[4002],[4599],{"type":51,"value":4600},"Online Demo",{"type":51,"value":4602}," for more components usages.",{"type":46,"tag":168,"props":4604,"children":4606},{"id":4605},"components",[4607],{"type":51,"value":4608},"Components",{"type":46,"tag":47,"props":4610,"children":4611},{},[4612,4614,4621],{"type":51,"value":4613},"Check ",{"type":46,"tag":1119,"props":4615,"children":4618},{"href":4616,"rel":4617},"https://github.com/nuxt/devtools/blob/main/packages/devtools-ui-kit/src/components",[4002],[4619],{"type":51,"value":4620},"all components",{"type":51,"value":60},{"type":46,"tag":168,"props":4623,"children":4625},{"id":4624},"theming",[4626],{"type":51,"value":4627},"Theming",{"type":46,"tag":47,"props":4629,"children":4630},{},[4631,4633,4639],{"type":51,"value":4632},"Powered by ",{"type":46,"tag":1119,"props":4634,"children":4637},{"href":4635,"rel":4636},"https://github.com/antfu/unocss",[4002],[4638],{"type":51,"value":4250},{"type":51,"value":4640},", you can use Tailwind/Windi CSS utilities to quickly customize the look and feel of components.",{"type":46,"tag":47,"props":4642,"children":4643},{},[4644],{"type":51,"value":4645},"It's also possible to override the default theme globally, for example:",{"type":46,"tag":62,"props":4647,"children":4649},{"className":96,"code":4648,"language":98,"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",[4650],{"type":46,"tag":54,"props":4651,"children":4652},{"__ignoreMap":40},[4653,4661,4684,4699,4714,4725,4741,4757,4794,4831,4868,4875,4882],{"type":46,"tag":72,"props":4654,"children":4655},{"class":74,"line":75},[4656],{"type":46,"tag":72,"props":4657,"children":4658},{"style":285},[4659],{"type":51,"value":4660},"// nuxt.config.js",{"type":46,"tag":72,"props":4662,"children":4663},{"class":74,"line":241},[4664,4668,4672,4676,4680],{"type":46,"tag":72,"props":4665,"children":4666},{"style":108},[4667],{"type":51,"value":1198},{"type":46,"tag":72,"props":4669,"children":4670},{"style":108},[4671],{"type":51,"value":3317},{"type":46,"tag":72,"props":4673,"children":4674},{"style":249},[4675],{"type":51,"value":4166},{"type":46,"tag":72,"props":4677,"children":4678},{"style":120},[4679],{"type":51,"value":257},{"type":46,"tag":72,"props":4681,"children":4682},{"style":114},[4683],{"type":51,"value":278},{"type":46,"tag":72,"props":4685,"children":4686},{"class":74,"line":245},[4687,4691,4695],{"type":46,"tag":72,"props":4688,"children":4689},{"style":295},[4690],{"type":51,"value":4182},{"type":46,"tag":72,"props":4692,"children":4693},{"style":114},[4694],{"type":51,"value":303},{"type":46,"tag":72,"props":4696,"children":4697},{"style":120},[4698],{"type":51,"value":676},{"type":46,"tag":72,"props":4700,"children":4701},{"class":74,"line":281},[4702,4706,4710],{"type":46,"tag":72,"props":4703,"children":4704},{"style":114},[4705],{"type":51,"value":4198},{"type":46,"tag":72,"props":4707,"children":4708},{"style":85},[4709],{"type":51,"value":4203},{"type":46,"tag":72,"props":4711,"children":4712},{"style":114},[4713],{"type":51,"value":148},{"type":46,"tag":72,"props":4715,"children":4716},{"class":74,"line":291},[4717,4721],{"type":46,"tag":72,"props":4718,"children":4719},{"style":120},[4720],{"type":51,"value":4215},{"type":46,"tag":72,"props":4722,"children":4723},{"style":114},[4724],{"type":51,"value":321},{"type":46,"tag":72,"props":4726,"children":4727},{"class":74,"line":324},[4728,4733,4737],{"type":46,"tag":72,"props":4729,"children":4730},{"style":295},[4731],{"type":51,"value":4732}," unocss",{"type":46,"tag":72,"props":4734,"children":4735},{"style":114},[4736],{"type":51,"value":303},{"type":46,"tag":72,"props":4738,"children":4739},{"style":114},[4740],{"type":51,"value":117},{"type":46,"tag":72,"props":4742,"children":4743},{"class":74,"line":333},[4744,4749,4753],{"type":46,"tag":72,"props":4745,"children":4746},{"style":295},[4747],{"type":51,"value":4748}," shortcuts",{"type":46,"tag":72,"props":4750,"children":4751},{"style":114},[4752],{"type":51,"value":303},{"type":46,"tag":72,"props":4754,"children":4755},{"style":114},[4756],{"type":51,"value":117},{"type":46,"tag":72,"props":4758,"children":4759},{"class":74,"line":363},[4760,4764,4769,4773,4777,4781,4786,4790],{"type":46,"tag":72,"props":4761,"children":4762},{"style":114},[4763],{"type":51,"value":684},{"type":46,"tag":72,"props":4765,"children":4766},{"style":295},[4767],{"type":51,"value":4768},"n-button-base",{"type":46,"tag":72,"props":4770,"children":4771},{"style":114},[4772],{"type":51,"value":148},{"type":46,"tag":72,"props":4774,"children":4775},{"style":114},[4776],{"type":51,"value":303},{"type":46,"tag":72,"props":4778,"children":4779},{"style":114},[4780],{"type":51,"value":138},{"type":46,"tag":72,"props":4782,"children":4783},{"style":85},[4784],{"type":51,"value":4785},"border n-border-base rounded shadow-sm op80 !outline-none",{"type":46,"tag":72,"props":4787,"children":4788},{"style":114},[4789],{"type":51,"value":148},{"type":46,"tag":72,"props":4791,"children":4792},{"style":114},[4793],{"type":51,"value":321},{"type":46,"tag":72,"props":4795,"children":4796},{"class":74,"line":372},[4797,4801,4806,4810,4814,4818,4823,4827],{"type":46,"tag":72,"props":4798,"children":4799},{"style":114},[4800],{"type":51,"value":684},{"type":46,"tag":72,"props":4802,"children":4803},{"style":295},[4804],{"type":51,"value":4805},"n-button-hover",{"type":46,"tag":72,"props":4807,"children":4808},{"style":114},[4809],{"type":51,"value":148},{"type":46,"tag":72,"props":4811,"children":4812},{"style":114},[4813],{"type":51,"value":303},{"type":46,"tag":72,"props":4815,"children":4816},{"style":114},[4817],{"type":51,"value":138},{"type":46,"tag":72,"props":4819,"children":4820},{"style":85},[4821],{"type":51,"value":4822},"op100 !border-context text-context",{"type":46,"tag":72,"props":4824,"children":4825},{"style":114},[4826],{"type":51,"value":148},{"type":46,"tag":72,"props":4828,"children":4829},{"style":114},[4830],{"type":51,"value":321},{"type":46,"tag":72,"props":4832,"children":4833},{"class":74,"line":402},[4834,4838,4843,4847,4851,4855,4860,4864],{"type":46,"tag":72,"props":4835,"children":4836},{"style":114},[4837],{"type":51,"value":684},{"type":46,"tag":72,"props":4839,"children":4840},{"style":295},[4841],{"type":51,"value":4842},"n-button-active",{"type":46,"tag":72,"props":4844,"children":4845},{"style":114},[4846],{"type":51,"value":148},{"type":46,"tag":72,"props":4848,"children":4849},{"style":114},[4850],{"type":51,"value":303},{"type":46,"tag":72,"props":4852,"children":4853},{"style":114},[4854],{"type":51,"value":138},{"type":46,"tag":72,"props":4856,"children":4857},{"style":85},[4858],{"type":51,"value":4859},"n-active-base bg-context/5",{"type":46,"tag":72,"props":4861,"children":4862},{"style":114},[4863],{"type":51,"value":148},{"type":46,"tag":72,"props":4865,"children":4866},{"style":114},[4867],{"type":51,"value":321},{"type":46,"tag":72,"props":4869,"children":4870},{"class":74,"line":411},[4871],{"type":46,"tag":72,"props":4872,"children":4873},{"style":114},[4874],{"type":51,"value":3593},{"type":46,"tag":72,"props":4876,"children":4877},{"class":74,"line":428},[4878],{"type":46,"tag":72,"props":4879,"children":4880},{"style":114},[4881],{"type":51,"value":2267},{"type":46,"tag":72,"props":4883,"children":4884},{"class":74,"line":458},[4885,4889],{"type":46,"tag":72,"props":4886,"children":4887},{"style":114},[4888],{"type":51,"value":503},{"type":46,"tag":72,"props":4890,"children":4891},{"style":120},[4892],{"type":51,"value":900},{"type":46,"tag":47,"props":4894,"children":4895},{},[4896,4898,4905],{"type":51,"value":4897},"You can find all the default values and available entries in ",{"type":46,"tag":1119,"props":4899,"children":4902},{"href":4900,"rel":4901},"https://github.com/nuxt/devtools/blob/main/packages/devtools-ui-kit/src/unocss.ts",[4002],[4903],{"type":51,"value":4904},"src/unocss.ts",{"type":51,"value":60},{"type":46,"tag":1612,"props":4907,"children":4908},{},[4909],{"type":51,"value":1616},{"title":40,"searchDepth":241,"depth":241,"links":4911},[4912,4915,4916,4917],{"id":4099,"depth":241,"text":4102,"children":4913},[4914],{"id":4117,"depth":245,"text":4120},{"id":4229,"depth":241,"text":4232},{"id":4605,"depth":241,"text":4608},{"id":4624,"depth":241,"text":4627},"content:2.module:2.ui-kit.md","2.module/2.ui-kit.md",1698390519115]