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