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