[{"data":1,"prerenderedAt":1358},["ShallowReactive",2],{"navigation":3,"docs-\u002Fmodule\u002Futils-kit":52,"docs-\u002Fmodule\u002Futils-kit-surround":1353},[4,22,43],{"title":5,"path":6,"stem":7,"children":8,"page":21},"Guide","\u002Fguide","1.guide",[9,13,17],{"title":10,"path":11,"stem":12},"Getting Started","\u002Fguide\u002Fgetting-started","1.guide\u002F0.getting-started",{"title":14,"path":15,"stem":16},"Features","\u002Fguide\u002Ffeatures","1.guide\u002F1.features",{"title":18,"path":19,"stem":20},"Composables","\u002Fguide\u002Fcomposables","1.guide\u002F2.composables",false,{"title":23,"path":24,"stem":25,"children":26,"page":21},"Module","\u002Fmodule","2.module",[27,31,35,39],{"title":28,"path":29,"stem":30},"Module Authors","\u002Fmodule\u002Fguide","2.module\u002F0.guide",{"title":32,"path":33,"stem":34},"Utility Kit","\u002Fmodule\u002Futils-kit","2.module\u002F1.utils-kit",{"title":36,"path":37,"stem":38},"UI Kit","\u002Fmodule\u002Fui-kit","2.module\u002F2.ui-kit",{"title":40,"path":41,"stem":42},"Migration to v4","\u002Fmodule\u002Fmigration-v4","2.module\u002F3.migration-v4",{"title":44,"path":45,"stem":46,"children":47,"page":21},"Development","\u002Fdevelopment","3.development",[48],{"title":49,"path":50,"stem":51},"Contribution Guide","\u002Fdevelopment\u002Fcontributing","3.development\u002F0.contributing",{"id":53,"title":32,"body":54,"description":1348,"extension":1349,"meta":1350,"navigation":184,"path":33,"seo":1351,"stem":34,"__hash__":1352},"docs\u002F2.module\u002F1.utils-kit.md",{"type":55,"value":56,"toc":1332},"minimark",[57,66,91,127,137,143,150,156,349,352,385,488,494,501,507,514,716,745,751,754,839,847,853,856,859,904,915,920,931,936,950,955,958,1019,1025,1031,1130,1136,1142,1148,1156,1261,1267,1271,1328],[58,59,60,61,65],"p",{},"Since v0.3.0, we are now providing a utility kit for easier DevTools integrations, similar to ",[62,63,64],"code",{},"@nuxt\u002Fkit",".",[67,68,73],"pre",{"className":69,"code":70,"language":71,"meta":72,"style":72},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm i @nuxt\u002Fdevtools-kit\n","bash","",[62,74,75],{"__ignoreMap":72},[76,77,80,84,88],"span",{"class":78,"line":79},"line",1,[76,81,83],{"class":82},"sBMFI","npm",[76,85,87],{"class":86},"sfazB"," i",[76,89,90],{"class":86}," @nuxt\u002Fdevtools-kit\n",[67,92,96],{"className":93,"code":94,"language":95,"meta":72,"style":72},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { addCustomTab } from '@nuxt\u002Fdevtools-kit'\n","ts",[62,97,98],{"__ignoreMap":72},[76,99,100,104,108,112,115,118,121,124],{"class":78,"line":79},[76,101,103],{"class":102},"s7zQu","import",[76,105,107],{"class":106},"sMK4o"," {",[76,109,111],{"class":110},"sTEyZ"," addCustomTab",[76,113,114],{"class":106}," }",[76,116,117],{"class":102}," from",[76,119,120],{"class":106}," '",[76,122,123],{"class":86},"@nuxt\u002Fdevtools-kit",[76,125,126],{"class":106},"'\n",[58,128,129,130,132,133,136],{},"We recommend module authors to install ",[62,131,123],{}," as a dependency and ",[62,134,135],{},"@nuxt\u002Fdevtools"," as a dev dependency.",[138,139,141],"h2",{"id":140},"nuxtdevtools-kit",[62,142,123],{},[144,145,147],"h3",{"id":146},"addcustomtab",[62,148,149],{},"addCustomTab()",[58,151,152,153,65],{},"A shorthand for calling the hook ",[62,154,155],{},"devtools:customTabs",[67,157,159],{"className":93,"code":158,"language":95,"meta":72,"style":72},"import { addCustomTab } from '@nuxt\u002Fdevtools-kit'\n\naddCustomTab(() => ({\n  \u002F\u002F unique identifier\n  name: 'my-module',\n  \u002F\u002F title to display in the tab\n  title: 'My Module',\n  \u002F\u002F any icon from Iconify, or a URL to an image\n  icon: 'carbon:apps',\n  \u002F\u002F iframe view\n  view: {\n    type: 'iframe',\n    src: '\u002Furl-to-your-module-view',\n  },\n}))\n",[62,160,161,179,186,209,216,237,243,260,266,283,289,300,317,334,340],{"__ignoreMap":72},[76,162,163,165,167,169,171,173,175,177],{"class":78,"line":79},[76,164,103],{"class":102},[76,166,107],{"class":106},[76,168,111],{"class":110},[76,170,114],{"class":106},[76,172,117],{"class":102},[76,174,120],{"class":106},[76,176,123],{"class":86},[76,178,126],{"class":106},[76,180,182],{"class":78,"line":181},2,[76,183,185],{"emptyLinePlaceholder":184},true,"\n",[76,187,189,193,196,199,203,206],{"class":78,"line":188},3,[76,190,192],{"class":191},"s2Zo4","addCustomTab",[76,194,195],{"class":110},"(",[76,197,198],{"class":106},"()",[76,200,202],{"class":201},"spNyl"," =>",[76,204,205],{"class":110}," (",[76,207,208],{"class":106},"{\n",[76,210,212],{"class":78,"line":211},4,[76,213,215],{"class":214},"sHwdD","  \u002F\u002F unique identifier\n",[76,217,219,223,226,228,231,234],{"class":78,"line":218},5,[76,220,222],{"class":221},"swJcz","  name",[76,224,225],{"class":106},":",[76,227,120],{"class":106},[76,229,230],{"class":86},"my-module",[76,232,233],{"class":106},"'",[76,235,236],{"class":106},",\n",[76,238,240],{"class":78,"line":239},6,[76,241,242],{"class":214},"  \u002F\u002F title to display in the tab\n",[76,244,246,249,251,253,256,258],{"class":78,"line":245},7,[76,247,248],{"class":221},"  title",[76,250,225],{"class":106},[76,252,120],{"class":106},[76,254,255],{"class":86},"My Module",[76,257,233],{"class":106},[76,259,236],{"class":106},[76,261,263],{"class":78,"line":262},8,[76,264,265],{"class":214},"  \u002F\u002F any icon from Iconify, or a URL to an image\n",[76,267,269,272,274,276,279,281],{"class":78,"line":268},9,[76,270,271],{"class":221},"  icon",[76,273,225],{"class":106},[76,275,120],{"class":106},[76,277,278],{"class":86},"carbon:apps",[76,280,233],{"class":106},[76,282,236],{"class":106},[76,284,286],{"class":78,"line":285},10,[76,287,288],{"class":214},"  \u002F\u002F iframe view\n",[76,290,292,295,297],{"class":78,"line":291},11,[76,293,294],{"class":221},"  view",[76,296,225],{"class":106},[76,298,299],{"class":106}," {\n",[76,301,303,306,308,310,313,315],{"class":78,"line":302},12,[76,304,305],{"class":221},"    type",[76,307,225],{"class":106},[76,309,120],{"class":106},[76,311,312],{"class":86},"iframe",[76,314,233],{"class":106},[76,316,236],{"class":106},[76,318,320,323,325,327,330,332],{"class":78,"line":319},13,[76,321,322],{"class":221},"    src",[76,324,225],{"class":106},[76,326,120],{"class":106},[76,328,329],{"class":86},"\u002Furl-to-your-module-view",[76,331,233],{"class":106},[76,333,236],{"class":106},[76,335,337],{"class":78,"line":336},14,[76,338,339],{"class":106},"  },\n",[76,341,343,346],{"class":78,"line":342},15,[76,344,345],{"class":106},"}",[76,347,348],{"class":110},"))\n",[58,350,351],{},"The iframe view supports the following options:",[353,354,355,362,372],"ul",{},[356,357,358,361],"li",{},[62,359,360],{},"src",": URL of the iframe",[356,363,364,367,368,371],{},[62,365,366],{},"persistent",": Whether to persist the iframe instance when switching tabs (default: ",[62,369,370],{},"true",")",[356,373,374,377,378,381,382,371],{},[62,375,376],{},"permissions",": Additional permissions to allow in the iframe (merged with default ",[62,379,380],{},"clipboard-write"," and ",[62,383,384],{},"clipboard-read",[67,386,388],{"className":93,"code":387,"language":95,"meta":72,"style":72},"const view: ModuleIframeView = {\n  type: 'iframe',\n  src: '\u002Furl-to-your-module-view',\n  persistent: true,\n  permissions: ['camera', 'microphone'],\n}\n",[62,389,390,408,423,438,451,483],{"__ignoreMap":72},[76,391,392,395,398,400,403,406],{"class":78,"line":79},[76,393,394],{"class":201},"const",[76,396,397],{"class":110}," view",[76,399,225],{"class":106},[76,401,402],{"class":82}," ModuleIframeView",[76,404,405],{"class":106}," =",[76,407,299],{"class":106},[76,409,410,413,415,417,419,421],{"class":78,"line":181},[76,411,412],{"class":221},"  type",[76,414,225],{"class":106},[76,416,120],{"class":106},[76,418,312],{"class":86},[76,420,233],{"class":106},[76,422,236],{"class":106},[76,424,425,428,430,432,434,436],{"class":78,"line":188},[76,426,427],{"class":221},"  src",[76,429,225],{"class":106},[76,431,120],{"class":106},[76,433,329],{"class":86},[76,435,233],{"class":106},[76,437,236],{"class":106},[76,439,440,443,445,449],{"class":78,"line":211},[76,441,442],{"class":221},"  persistent",[76,444,225],{"class":106},[76,446,448],{"class":447},"sfNiH"," true",[76,450,236],{"class":106},[76,452,453,456,458,461,463,466,468,471,473,476,478,481],{"class":78,"line":218},[76,454,455],{"class":221},"  permissions",[76,457,225],{"class":106},[76,459,460],{"class":110}," [",[76,462,233],{"class":106},[76,464,465],{"class":86},"camera",[76,467,233],{"class":106},[76,469,470],{"class":106},",",[76,472,120],{"class":106},[76,474,475],{"class":86},"microphone",[76,477,233],{"class":106},[76,479,480],{"class":110},"]",[76,482,236],{"class":106},[76,484,485],{"class":78,"line":239},[76,486,487],{"class":106},"}\n",[144,489,491],{"id":490},"refreshcustomtabs",[62,492,493],{},"refreshCustomTabs()",[58,495,496,497,500],{},"A shorthand for call hook ",[62,498,499],{},"devtools:customTabs:refresh",". It will refresh all custom tabs.",[144,502,504],{"id":503},"startsubprocess",[62,505,506],{},"startSubprocess()",[58,508,509,510,513],{},"Start a sub process using ",[62,511,512],{},"tinyexec"," and create a terminal tab in DevTools.",[67,515,517],{"className":93,"code":516,"language":95,"meta":72,"style":72},"import { startSubprocess } from '@nuxt\u002Fdevtools-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",[62,518,519,538,542,557,562,578,588,600,611,622,641,648,652,656,672,688,705,710],{"__ignoreMap":72},[76,520,521,523,525,528,530,532,534,536],{"class":78,"line":79},[76,522,103],{"class":102},[76,524,107],{"class":106},[76,526,527],{"class":110}," startSubprocess",[76,529,114],{"class":106},[76,531,117],{"class":102},[76,533,120],{"class":106},[76,535,123],{"class":86},[76,537,126],{"class":106},[76,539,540],{"class":78,"line":181},[76,541,185],{"emptyLinePlaceholder":184},[76,543,544,546,549,552,554],{"class":78,"line":188},[76,545,394],{"class":201},[76,547,548],{"class":110}," subprocess ",[76,550,551],{"class":106},"=",[76,553,527],{"class":191},[76,555,556],{"class":110},"(\n",[76,558,559],{"class":78,"line":211},[76,560,561],{"class":106},"  {\n",[76,563,564,567,569,571,574,576],{"class":78,"line":218},[76,565,566],{"class":221},"    command",[76,568,225],{"class":106},[76,570,120],{"class":106},[76,572,573],{"class":86},"code-server",[76,575,233],{"class":106},[76,577,236],{"class":106},[76,579,580,583,585],{"class":78,"line":239},[76,581,582],{"class":221},"    args",[76,584,225],{"class":106},[76,586,587],{"class":110}," [\n",[76,589,590,593,596,598],{"class":78,"line":245},[76,591,592],{"class":106},"      '",[76,594,595],{"class":86},"serve-local",[76,597,233],{"class":106},[76,599,236],{"class":106},[76,601,602,604,607,609],{"class":78,"line":262},[76,603,592],{"class":106},[76,605,606],{"class":86},"--accept-server-license-terms",[76,608,233],{"class":106},[76,610,236],{"class":106},[76,612,613,615,618,620],{"class":78,"line":268},[76,614,592],{"class":106},[76,616,617],{"class":86},"--without-connection-token",[76,619,233],{"class":106},[76,621,236],{"class":106},[76,623,624,627,630,633,636,639],{"class":78,"line":285},[76,625,626],{"class":106},"      `",[76,628,629],{"class":86},"--port=",[76,631,632],{"class":106},"${",[76,634,635],{"class":110},"port",[76,637,638],{"class":106},"}`",[76,640,236],{"class":106},[76,642,643,646],{"class":78,"line":291},[76,644,645],{"class":110},"    ]",[76,647,236],{"class":106},[76,649,650],{"class":78,"line":302},[76,651,339],{"class":106},[76,653,654],{"class":78,"line":319},[76,655,561],{"class":106},[76,657,658,661,663,665,668,670],{"class":78,"line":336},[76,659,660],{"class":221},"    id",[76,662,225],{"class":106},[76,664,120],{"class":106},[76,666,667],{"class":86},"devtools:vscode",[76,669,233],{"class":106},[76,671,236],{"class":106},[76,673,674,677,679,681,684,686],{"class":78,"line":342},[76,675,676],{"class":221},"    name",[76,678,225],{"class":106},[76,680,120],{"class":106},[76,682,683],{"class":86},"VS Code Server",[76,685,233],{"class":106},[76,687,236],{"class":106},[76,689,691,694,696,698,701,703],{"class":78,"line":690},16,[76,692,693],{"class":221},"    icon",[76,695,225],{"class":106},[76,697,120],{"class":106},[76,699,700],{"class":86},"logos-visual-studio-code",[76,702,233],{"class":106},[76,704,236],{"class":106},[76,706,708],{"class":78,"line":707},17,[76,709,339],{"class":106},[76,711,713],{"class":78,"line":712},18,[76,714,715],{"class":110},")\n",[67,717,719],{"className":93,"code":718,"language":95,"meta":72,"style":72},"subprocess.restart()\nsubprocess.terminate()\n",[62,720,721,734],{"__ignoreMap":72},[76,722,723,726,728,731],{"class":78,"line":79},[76,724,725],{"class":110},"subprocess",[76,727,65],{"class":106},[76,729,730],{"class":191},"restart",[76,732,733],{"class":110},"()\n",[76,735,736,738,740,743],{"class":78,"line":181},[76,737,725],{"class":110},[76,739,65],{"class":106},[76,741,742],{"class":191},"terminate",[76,744,733],{"class":110},[144,746,748],{"id":747},"extendserverrpc",[62,749,750],{},"extendServerRpc()",[58,752,753],{},"Extend the server RPC with your own methods.",[67,755,757],{"className":93,"code":756,"language":95,"meta":72,"style":72},"import { extendServerRpc } from '@nuxt\u002Fdevtools-kit'\n\nconst rpc = extendServerRpc('my-module', {\n  async myMethod() {\n    return 'hello'\n  },\n})\n",[62,758,759,778,782,805,817,829,833],{"__ignoreMap":72},[76,760,761,763,765,768,770,772,774,776],{"class":78,"line":79},[76,762,103],{"class":102},[76,764,107],{"class":106},[76,766,767],{"class":110}," extendServerRpc",[76,769,114],{"class":106},[76,771,117],{"class":102},[76,773,120],{"class":106},[76,775,123],{"class":86},[76,777,126],{"class":106},[76,779,780],{"class":78,"line":181},[76,781,185],{"emptyLinePlaceholder":184},[76,783,784,786,789,791,793,795,797,799,801,803],{"class":78,"line":188},[76,785,394],{"class":201},[76,787,788],{"class":110}," rpc ",[76,790,551],{"class":106},[76,792,767],{"class":191},[76,794,195],{"class":110},[76,796,233],{"class":106},[76,798,230],{"class":86},[76,800,233],{"class":106},[76,802,470],{"class":106},[76,804,299],{"class":106},[76,806,807,810,813,815],{"class":78,"line":211},[76,808,809],{"class":201},"  async",[76,811,812],{"class":221}," myMethod",[76,814,198],{"class":106},[76,816,299],{"class":106},[76,818,819,822,824,827],{"class":78,"line":218},[76,820,821],{"class":102},"    return",[76,823,120],{"class":106},[76,825,826],{"class":86},"hello",[76,828,126],{"class":106},[76,830,831],{"class":78,"line":239},[76,832,339],{"class":106},[76,834,835,837],{"class":78,"line":245},[76,836,345],{"class":106},[76,838,715],{"class":110},[58,840,841,842,65],{},"Learn more about ",[843,844,846],"a",{"href":845},"\u002Fmodule\u002Fguide#custom-rpc-functions","Custom RPC functions",[138,848,850],{"id":849},"nuxtdevtools-kitiframe-client",[62,851,852],{},"@nuxt\u002Fdevtools-kit\u002Fiframe-client",[58,854,855],{},"To provide complex interactions for your module integrations, we recommend to host your own view and display it in devtools via iframe.",[58,857,858],{},"To get the infomation from the devtools and the client app, you can do this in your client app:",[67,860,862],{"className":93,"code":861,"language":95,"meta":72,"style":72},"import { useDevtoolsClient } from '@nuxt\u002Fdevtools-kit\u002Fiframe-client'\n\nexport const devtoolsClient = useDevtoolsClient()\n",[62,863,864,883,887],{"__ignoreMap":72},[76,865,866,868,870,873,875,877,879,881],{"class":78,"line":79},[76,867,103],{"class":102},[76,869,107],{"class":106},[76,871,872],{"class":110}," useDevtoolsClient",[76,874,114],{"class":106},[76,876,117],{"class":102},[76,878,120],{"class":106},[76,880,852],{"class":86},[76,882,126],{"class":106},[76,884,885],{"class":78,"line":181},[76,886,185],{"emptyLinePlaceholder":184},[76,888,889,892,895,898,900,902],{"class":78,"line":188},[76,890,891],{"class":102},"export",[76,893,894],{"class":201}," const",[76,896,897],{"class":110}," devtoolsClient ",[76,899,551],{"class":106},[76,901,872],{"class":191},[76,903,733],{"class":110},[58,905,906,907,910,911,914],{},"When the iframe been served with the same origin (CORS limitation), devtools will automatically inject ",[62,908,909],{},"__NUXT_DEVTOOLS__"," to the iframe's window object. You can access it as a ref using ",[62,912,913],{},"useDevtoolsClient()"," utility.",[144,916,918],{"id":917},"usedevtoolsclient",[62,919,913],{},[58,921,922,923,926,927,930],{},"It will return a ref of ",[62,924,925],{},"NuxtDevtoolsIframeClient"," object that are intially ",[62,928,929],{},"null"," and will be updated when the connection is ready.",[58,932,933,935],{},[62,934,925],{}," contains two properties:",[353,937,938,944],{},[356,939,940,943],{},[62,941,942],{},"host",": APIs to communicate with the main app in browser",[356,945,946,949],{},[62,947,948],{},"devtools",": APIs to communicate with the devtools",[58,951,952,954],{},[62,953,942],{}," can be undefined when devtools are accessed standalone or from a different origin.",[58,956,957],{},"For example, you can get the router instance from the client app:",[67,959,961],{"className":93,"code":960,"language":95,"meta":72,"style":72},"const router = computed(() => devtoolsClient.value?.host?.nuxt.vueApp.config.globalProperties?.$router)\n",[62,962,963],{"__ignoreMap":72},[76,964,965,967,970,972,975,977,979,981,984,986,989,992,994,996,999,1001,1004,1006,1009,1011,1014,1016],{"class":78,"line":79},[76,966,394],{"class":201},[76,968,969],{"class":110}," router ",[76,971,551],{"class":106},[76,973,974],{"class":191}," computed",[76,976,195],{"class":110},[76,978,198],{"class":106},[76,980,202],{"class":201},[76,982,983],{"class":110}," devtoolsClient",[76,985,65],{"class":106},[76,987,988],{"class":110},"value",[76,990,991],{"class":106},"?.",[76,993,942],{"class":110},[76,995,991],{"class":106},[76,997,998],{"class":110},"nuxt",[76,1000,65],{"class":106},[76,1002,1003],{"class":110},"vueApp",[76,1005,65],{"class":106},[76,1007,1008],{"class":110},"config",[76,1010,65],{"class":106},[76,1012,1013],{"class":110},"globalProperties",[76,1015,991],{"class":106},[76,1017,1018],{"class":110},"$router)\n",[144,1020,1022],{"id":1021},"ondevtoolsclientconnected",[62,1023,1024],{},"onDevtoolsClientConnected()",[58,1026,1027,1028,1030],{},"Similiar to ",[62,1029,913],{}," but as a callback style:",[67,1032,1034],{"className":93,"code":1033,"language":95,"meta":72,"style":72},"import { onDevtoolsClientConnected } from '@nuxt\u002Fdevtools-kit\u002Fiframe-client'\n\nonDevtoolsClientConnected(async (client) => {\n  \u002F\u002F client is NuxtDevtoolsIframeClient\n\n  const config = client.devtools.rpc.getServerConfig()\n  \u002F\u002F ...\n})\n",[62,1035,1036,1055,1059,1081,1086,1090,1119,1124],{"__ignoreMap":72},[76,1037,1038,1040,1042,1045,1047,1049,1051,1053],{"class":78,"line":79},[76,1039,103],{"class":102},[76,1041,107],{"class":106},[76,1043,1044],{"class":110}," onDevtoolsClientConnected",[76,1046,114],{"class":106},[76,1048,117],{"class":102},[76,1050,120],{"class":106},[76,1052,852],{"class":86},[76,1054,126],{"class":106},[76,1056,1057],{"class":78,"line":181},[76,1058,185],{"emptyLinePlaceholder":184},[76,1060,1061,1064,1066,1069,1071,1075,1077,1079],{"class":78,"line":188},[76,1062,1063],{"class":191},"onDevtoolsClientConnected",[76,1065,195],{"class":110},[76,1067,1068],{"class":201},"async",[76,1070,205],{"class":106},[76,1072,1074],{"class":1073},"sHdIc","client",[76,1076,371],{"class":106},[76,1078,202],{"class":201},[76,1080,299],{"class":106},[76,1082,1083],{"class":78,"line":211},[76,1084,1085],{"class":214},"  \u002F\u002F client is NuxtDevtoolsIframeClient\n",[76,1087,1088],{"class":78,"line":218},[76,1089,185],{"emptyLinePlaceholder":184},[76,1091,1092,1095,1098,1100,1103,1105,1107,1109,1112,1114,1117],{"class":78,"line":239},[76,1093,1094],{"class":201},"  const",[76,1096,1097],{"class":110}," config",[76,1099,405],{"class":106},[76,1101,1102],{"class":110}," client",[76,1104,65],{"class":106},[76,1106,948],{"class":110},[76,1108,65],{"class":106},[76,1110,1111],{"class":110},"rpc",[76,1113,65],{"class":106},[76,1115,1116],{"class":191},"getServerConfig",[76,1118,733],{"class":221},[76,1120,1121],{"class":78,"line":245},[76,1122,1123],{"class":214},"  \u002F\u002F ...\n",[76,1125,1126,1128],{"class":78,"line":262},[76,1127,345],{"class":106},[76,1129,715],{"class":110},[138,1131,1133],{"id":1132},"nuxtdevtools-kithost-client",[62,1134,1135],{},"@nuxt\u002Fdevtools-kit\u002Fhost-client",[58,1137,1138,1139,1141],{},"When you have iframe for your devtools view, sometimes you need to communicate with the devtools host (the main app in browser) with a runtime plugin. You can use ",[62,1140,1135],{}," to do that.",[144,1143,1145],{"id":1144},"usedevtoolshostclient",[62,1146,1147],{},"useDevtoolsHostClient()",[58,1149,922,1150,926,1153,1155],{},[62,1151,1152],{},"NuxtDevtoolsHostClient",[62,1154,929],{}," and will be updated when the host is initialized by NuxtDevtools.",[67,1157,1159],{"className":93,"code":1158,"language":95,"meta":72,"style":72},"import { useDevtoolsHostClient } from '@nuxt\u002Fdevtools-kit\u002Fhost-client'\n\nexport default defineNuxtPlugin({\n  name: 'my-module:devtools',\n  setup(nuxtApp) {\n    const devtoolsHost = useDevtoolsHostClient()\n\n    \u002F\u002F ...\n  }\n})\n",[62,1160,1161,1180,1184,1198,1213,1227,1241,1245,1250,1255],{"__ignoreMap":72},[76,1162,1163,1165,1167,1170,1172,1174,1176,1178],{"class":78,"line":79},[76,1164,103],{"class":102},[76,1166,107],{"class":106},[76,1168,1169],{"class":110}," useDevtoolsHostClient",[76,1171,114],{"class":106},[76,1173,117],{"class":102},[76,1175,120],{"class":106},[76,1177,1135],{"class":86},[76,1179,126],{"class":106},[76,1181,1182],{"class":78,"line":181},[76,1183,185],{"emptyLinePlaceholder":184},[76,1185,1186,1188,1191,1194,1196],{"class":78,"line":188},[76,1187,891],{"class":102},[76,1189,1190],{"class":102}," default",[76,1192,1193],{"class":191}," defineNuxtPlugin",[76,1195,195],{"class":110},[76,1197,208],{"class":106},[76,1199,1200,1202,1204,1206,1209,1211],{"class":78,"line":211},[76,1201,222],{"class":221},[76,1203,225],{"class":106},[76,1205,120],{"class":106},[76,1207,1208],{"class":86},"my-module:devtools",[76,1210,233],{"class":106},[76,1212,236],{"class":106},[76,1214,1215,1218,1220,1223,1225],{"class":78,"line":218},[76,1216,1217],{"class":221},"  setup",[76,1219,195],{"class":106},[76,1221,1222],{"class":1073},"nuxtApp",[76,1224,371],{"class":106},[76,1226,299],{"class":106},[76,1228,1229,1232,1235,1237,1239],{"class":78,"line":239},[76,1230,1231],{"class":201},"    const",[76,1233,1234],{"class":110}," devtoolsHost",[76,1236,405],{"class":106},[76,1238,1169],{"class":191},[76,1240,733],{"class":221},[76,1242,1243],{"class":78,"line":245},[76,1244,185],{"emptyLinePlaceholder":184},[76,1246,1247],{"class":78,"line":262},[76,1248,1249],{"class":214},"    \u002F\u002F ...\n",[76,1251,1252],{"class":78,"line":268},[76,1253,1254],{"class":106},"  }\n",[76,1256,1257,1259],{"class":78,"line":285},[76,1258,345],{"class":106},[76,1260,715],{"class":110},[144,1262,1264],{"id":1263},"ondevtoolshostclientconnected",[62,1265,1266],{},"onDevtoolsHostClientConnected()",[58,1268,1027,1269,1030],{},[62,1270,1147],{},[67,1272,1274],{"className":93,"code":1273,"language":95,"meta":72,"style":72},"import { onDevtoolsHostClientConnected } from '@nuxt\u002Fdevtools-kit\u002Fhost-client'\n\nonDevtoolsHostClientConnected(async (host) => {\n\n})\n",[62,1275,1276,1295,1299,1318,1322],{"__ignoreMap":72},[76,1277,1278,1280,1282,1285,1287,1289,1291,1293],{"class":78,"line":79},[76,1279,103],{"class":102},[76,1281,107],{"class":106},[76,1283,1284],{"class":110}," onDevtoolsHostClientConnected",[76,1286,114],{"class":106},[76,1288,117],{"class":102},[76,1290,120],{"class":106},[76,1292,1135],{"class":86},[76,1294,126],{"class":106},[76,1296,1297],{"class":78,"line":181},[76,1298,185],{"emptyLinePlaceholder":184},[76,1300,1301,1304,1306,1308,1310,1312,1314,1316],{"class":78,"line":188},[76,1302,1303],{"class":191},"onDevtoolsHostClientConnected",[76,1305,195],{"class":110},[76,1307,1068],{"class":201},[76,1309,205],{"class":106},[76,1311,942],{"class":1073},[76,1313,371],{"class":106},[76,1315,202],{"class":201},[76,1317,299],{"class":106},[76,1319,1320],{"class":78,"line":211},[76,1321,185],{"emptyLinePlaceholder":184},[76,1323,1324,1326],{"class":78,"line":218},[76,1325,345],{"class":106},[76,1327,715],{"class":110},[1329,1330,1331],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":72,"searchDepth":181,"depth":181,"links":1333},[1334,1340,1344],{"id":140,"depth":181,"text":123,"children":1335},[1336,1337,1338,1339],{"id":146,"depth":188,"text":149},{"id":490,"depth":188,"text":493},{"id":503,"depth":188,"text":506},{"id":747,"depth":188,"text":750},{"id":849,"depth":181,"text":852,"children":1341},[1342,1343],{"id":917,"depth":188,"text":913},{"id":1021,"depth":188,"text":1024},{"id":1132,"depth":181,"text":1135,"children":1345},[1346,1347],{"id":1144,"depth":188,"text":1147},{"id":1263,"depth":188,"text":1266},"Utility kit for easier DevTools integrations.","md",{},{"title":32,"description":1348},"7heRsKBYtd95gxvC2qGi5HU0sezZRXv_T94LD8eUhFQ",[1354,1356],{"title":28,"path":29,"stem":30,"description":1355,"children":-1},"Add your own modules integration to the Nuxt DevTools.",{"title":36,"path":37,"stem":38,"description":1357,"children":-1},"UI Kit is for module authors to build a custom view.",1774568848203]