[{"data":1,"prerenderedAt":1708},["ShallowReactive",2],{"navigation":3,"docs-\u002Fmodule\u002Fguide":52,"docs-\u002Fmodule\u002Fguide-surround":1703},[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":28,"body":54,"description":1698,"extension":1699,"meta":1700,"navigation":158,"path":29,"seo":1701,"stem":30,"__hash__":1702},"docs\u002F2.module\u002F0.guide.md",{"type":55,"value":56,"toc":1687},"minimark",[57,61,66,69,104,107,111,114,117,313,316,496,501,516,619,626,633,637,640,1012,1019,1029,1033,1040,1044,1047,1050,1139,1142,1418,1421,1617,1621,1624,1629,1633,1636,1683],[58,59,60],"p",{},"Nuxt DevTools is designed to be extensible. You can add your own modules integration to the DevTools.",[62,63,65],"h2",{"id":64},"starter-template","Starter Template",[58,67,68],{},"If you want to try integrating with Nuxt DevTools, you can run",[70,71,76],"pre",{"className":72,"code":73,"language":74,"meta":75,"style":75},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx nuxi init my-module -t module-devtools\n","bash","",[77,78,79],"code",{"__ignoreMap":75},[80,81,84,88,92,95,98,101],"span",{"class":82,"line":83},"line",1,[80,85,87],{"class":86},"sBMFI","npx",[80,89,91],{"class":90},"sfazB"," nuxi",[80,93,94],{"class":90}," init",[80,96,97],{"class":90}," my-module",[80,99,100],{"class":90}," -t",[80,102,103],{"class":90}," module-devtools\n",[58,105,106],{},"to create a new module starter with Nuxt DevTools integration pre-configured (contributing a fully custom view as a tab).",[62,108,110],{"id":109},"contributing-to-view","Contributing to View",[58,112,113],{},"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.",[58,115,116],{},"You can use the utility kit provided by Nuxt DevTools to register your custom tab:",[70,118,122],{"className":119,"code":120,"language":121,"meta":75,"style":75},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","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","ts",[77,123,124,153,160,173,180,201,207,224,230,247,253,264,281,298,304],{"__ignoreMap":75},[80,125,126,130,134,138,141,144,147,150],{"class":82,"line":83},[80,127,129],{"class":128},"s7zQu","import",[80,131,133],{"class":132},"sMK4o"," {",[80,135,137],{"class":136},"sTEyZ"," addCustomTab",[80,139,140],{"class":132}," }",[80,142,143],{"class":128}," from",[80,145,146],{"class":132}," '",[80,148,149],{"class":90},"@nuxt\u002Fdevtools-kit",[80,151,152],{"class":132},"'\n",[80,154,156],{"class":82,"line":155},2,[80,157,159],{"emptyLinePlaceholder":158},true,"\n",[80,161,163,167,170],{"class":82,"line":162},3,[80,164,166],{"class":165},"s2Zo4","addCustomTab",[80,168,169],{"class":136},"(",[80,171,172],{"class":132},"{\n",[80,174,176],{"class":82,"line":175},4,[80,177,179],{"class":178},"sHwdD","  \u002F\u002F unique identifier\n",[80,181,183,187,190,192,195,198],{"class":82,"line":182},5,[80,184,186],{"class":185},"swJcz","  name",[80,188,189],{"class":132},":",[80,191,146],{"class":132},[80,193,194],{"class":90},"my-module",[80,196,197],{"class":132},"'",[80,199,200],{"class":132},",\n",[80,202,204],{"class":82,"line":203},6,[80,205,206],{"class":178},"  \u002F\u002F title to display in the tab\n",[80,208,210,213,215,217,220,222],{"class":82,"line":209},7,[80,211,212],{"class":185},"  title",[80,214,189],{"class":132},[80,216,146],{"class":132},[80,218,219],{"class":90},"My Module",[80,221,197],{"class":132},[80,223,200],{"class":132},[80,225,227],{"class":82,"line":226},8,[80,228,229],{"class":178},"  \u002F\u002F any icon from Iconify, or a URL to an image\n",[80,231,233,236,238,240,243,245],{"class":82,"line":232},9,[80,234,235],{"class":185},"  icon",[80,237,189],{"class":132},[80,239,146],{"class":132},[80,241,242],{"class":90},"carbon:apps",[80,244,197],{"class":132},[80,246,200],{"class":132},[80,248,250],{"class":82,"line":249},10,[80,251,252],{"class":178},"  \u002F\u002F iframe view\n",[80,254,256,259,261],{"class":82,"line":255},11,[80,257,258],{"class":185},"  view",[80,260,189],{"class":132},[80,262,263],{"class":132}," {\n",[80,265,267,270,272,274,277,279],{"class":82,"line":266},12,[80,268,269],{"class":185},"    type",[80,271,189],{"class":132},[80,273,146],{"class":132},[80,275,276],{"class":90},"iframe",[80,278,197],{"class":132},[80,280,200],{"class":132},[80,282,284,287,289,291,294,296],{"class":82,"line":283},13,[80,285,286],{"class":185},"    src",[80,288,189],{"class":132},[80,290,146],{"class":132},[80,292,293],{"class":90},"\u002Furl-to-your-module-view",[80,295,197],{"class":132},[80,297,200],{"class":132},[80,299,301],{"class":82,"line":300},14,[80,302,303],{"class":132},"  },\n",[80,305,307,310],{"class":82,"line":306},15,[80,308,309],{"class":132},"}",[80,311,312],{"class":136},")\n",[58,314,315],{},"Or if you prefer to use Nuxt hooks:",[70,317,319],{"className":119,"code":318,"language":121,"meta":75,"style":75},"nuxt.hook('devtools:customTabs', (tabs) => {\n  tabs.push({\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})\n",[77,320,321,360,374,379,394,399,414,419,434,439,448,463,478,483,490],{"__ignoreMap":75},[80,322,323,326,329,332,334,336,339,341,344,347,351,354,358],{"class":82,"line":83},[80,324,325],{"class":136},"nuxt",[80,327,328],{"class":132},".",[80,330,331],{"class":165},"hook",[80,333,169],{"class":136},[80,335,197],{"class":132},[80,337,338],{"class":90},"devtools:customTabs",[80,340,197],{"class":132},[80,342,343],{"class":132},",",[80,345,346],{"class":132}," (",[80,348,350],{"class":349},"sHdIc","tabs",[80,352,353],{"class":132},")",[80,355,357],{"class":356},"spNyl"," =>",[80,359,263],{"class":132},[80,361,362,365,367,370,372],{"class":82,"line":155},[80,363,364],{"class":136},"  tabs",[80,366,328],{"class":132},[80,368,369],{"class":165},"push",[80,371,169],{"class":185},[80,373,172],{"class":132},[80,375,376],{"class":82,"line":162},[80,377,378],{"class":178},"    \u002F\u002F unique identifier\n",[80,380,381,384,386,388,390,392],{"class":82,"line":175},[80,382,383],{"class":185},"    name",[80,385,189],{"class":132},[80,387,146],{"class":132},[80,389,194],{"class":90},[80,391,197],{"class":132},[80,393,200],{"class":132},[80,395,396],{"class":82,"line":182},[80,397,398],{"class":178},"    \u002F\u002F title to display in the tab\n",[80,400,401,404,406,408,410,412],{"class":82,"line":203},[80,402,403],{"class":185},"    title",[80,405,189],{"class":132},[80,407,146],{"class":132},[80,409,219],{"class":90},[80,411,197],{"class":132},[80,413,200],{"class":132},[80,415,416],{"class":82,"line":209},[80,417,418],{"class":178},"    \u002F\u002F any icon from Iconify, or a URL to an image\n",[80,420,421,424,426,428,430,432],{"class":82,"line":226},[80,422,423],{"class":185},"    icon",[80,425,189],{"class":132},[80,427,146],{"class":132},[80,429,242],{"class":90},[80,431,197],{"class":132},[80,433,200],{"class":132},[80,435,436],{"class":82,"line":232},[80,437,438],{"class":178},"    \u002F\u002F iframe view\n",[80,440,441,444,446],{"class":82,"line":249},[80,442,443],{"class":185},"    view",[80,445,189],{"class":132},[80,447,263],{"class":132},[80,449,450,453,455,457,459,461],{"class":82,"line":255},[80,451,452],{"class":185},"      type",[80,454,189],{"class":132},[80,456,146],{"class":132},[80,458,276],{"class":90},[80,460,197],{"class":132},[80,462,200],{"class":132},[80,464,465,468,470,472,474,476],{"class":82,"line":266},[80,466,467],{"class":185},"      src",[80,469,189],{"class":132},[80,471,146],{"class":132},[80,473,293],{"class":90},[80,475,197],{"class":132},[80,477,200],{"class":132},[80,479,480],{"class":82,"line":283},[80,481,482],{"class":132},"    },\n",[80,484,485,488],{"class":82,"line":300},[80,486,487],{"class":132},"  }",[80,489,312],{"class":185},[80,491,492,494],{"class":82,"line":306},[80,493,309],{"class":132},[80,495,312],{"class":136},[497,498,500],"h3",{"id":499},"iframe-permissions","Iframe Permissions",[58,502,503,504,507,508,511,512,515],{},"By default, iframes have ",[77,505,506],{},"clipboard-write"," and ",[77,509,510],{},"clipboard-read"," permissions enabled. You can add additional permissions using the ",[77,513,514],{},"permissions"," option:",[70,517,519],{"className":119,"code":518,"language":121,"meta":75,"style":75},"const view: ModuleIframeView = {\n  type: 'iframe',\n  src: '\u002Furl-to-your-module-view',\n  \u002F\u002F Additional permissions to allow in the iframe\n  permissions: ['camera', 'microphone', 'geolocation'],\n}\n",[77,520,521,539,554,569,574,614],{"__ignoreMap":75},[80,522,523,526,529,531,534,537],{"class":82,"line":83},[80,524,525],{"class":356},"const",[80,527,528],{"class":136}," view",[80,530,189],{"class":132},[80,532,533],{"class":86}," ModuleIframeView",[80,535,536],{"class":132}," =",[80,538,263],{"class":132},[80,540,541,544,546,548,550,552],{"class":82,"line":155},[80,542,543],{"class":185},"  type",[80,545,189],{"class":132},[80,547,146],{"class":132},[80,549,276],{"class":90},[80,551,197],{"class":132},[80,553,200],{"class":132},[80,555,556,559,561,563,565,567],{"class":82,"line":162},[80,557,558],{"class":185},"  src",[80,560,189],{"class":132},[80,562,146],{"class":132},[80,564,293],{"class":90},[80,566,197],{"class":132},[80,568,200],{"class":132},[80,570,571],{"class":82,"line":175},[80,572,573],{"class":178},"  \u002F\u002F Additional permissions to allow in the iframe\n",[80,575,576,579,581,584,586,589,591,593,595,598,600,602,604,607,609,612],{"class":82,"line":182},[80,577,578],{"class":185},"  permissions",[80,580,189],{"class":132},[80,582,583],{"class":136}," [",[80,585,197],{"class":132},[80,587,588],{"class":90},"camera",[80,590,197],{"class":132},[80,592,343],{"class":132},[80,594,146],{"class":132},[80,596,597],{"class":90},"microphone",[80,599,197],{"class":132},[80,601,343],{"class":132},[80,603,146],{"class":132},[80,605,606],{"class":90},"geolocation",[80,608,197],{"class":132},[80,610,611],{"class":136},"]",[80,613,200],{"class":132},[80,615,616],{"class":82,"line":203},[80,617,618],{"class":132},"}\n",[58,620,621,622,625],{},"These permissions will be merged with the default ones and set on the iframe's ",[77,623,624],{},"allow"," attribute.",[58,627,628,629,328],{},"Learn more about ",[630,631,632],"a",{"href":33},"DevTools Utility Kit",[62,634,636],{"id":635},"lazy-service-launching","Lazy Service Launching",[58,638,639],{},"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.",[70,641,643],{"className":119,"code":642,"language":121,"meta":75,"style":75},"let isReady = false\nconst promise: Promise\u003Cany> | null = null\n\nasync function launchService() {\n  \u002F\u002F ...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: '\u002Furl-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",[77,644,645,660,692,696,712,717,727,731,735,763,775,789,803,812,819,834,850,856,864,880,897,909,926,939,955,968,977,983,992,998,1005],{"__ignoreMap":75},[80,646,647,650,653,656],{"class":82,"line":83},[80,648,649],{"class":356},"let",[80,651,652],{"class":136}," isReady ",[80,654,655],{"class":132},"=",[80,657,659],{"class":658},"sfNiH"," false\n",[80,661,662,664,667,669,672,675,678,681,684,687,689],{"class":82,"line":155},[80,663,525],{"class":356},[80,665,666],{"class":136}," promise",[80,668,189],{"class":132},[80,670,671],{"class":86}," Promise",[80,673,674],{"class":132},"\u003C",[80,676,677],{"class":86},"any",[80,679,680],{"class":132},">",[80,682,683],{"class":132}," |",[80,685,686],{"class":86}," null",[80,688,536],{"class":132},[80,690,691],{"class":132}," null\n",[80,693,694],{"class":82,"line":162},[80,695,159],{"emptyLinePlaceholder":158},[80,697,698,701,704,707,710],{"class":82,"line":175},[80,699,700],{"class":356},"async",[80,702,703],{"class":356}," function",[80,705,706],{"class":165}," launchService",[80,708,709],{"class":132},"()",[80,711,263],{"class":132},[80,713,714],{"class":82,"line":182},[80,715,716],{"class":178},"  \u002F\u002F ...launch your service\n",[80,718,719,722,724],{"class":82,"line":203},[80,720,721],{"class":136},"  isReady",[80,723,536],{"class":132},[80,725,726],{"class":658}," true\n",[80,728,729],{"class":82,"line":209},[80,730,618],{"class":132},[80,732,733],{"class":82,"line":226},[80,734,159],{"emptyLinePlaceholder":158},[80,736,737,739,741,743,745,747,749,751,753,755,757,759,761],{"class":82,"line":232},[80,738,325],{"class":136},[80,740,328],{"class":132},[80,742,331],{"class":165},[80,744,169],{"class":136},[80,746,197],{"class":132},[80,748,338],{"class":90},[80,750,197],{"class":132},[80,752,343],{"class":132},[80,754,346],{"class":132},[80,756,350],{"class":349},[80,758,353],{"class":132},[80,760,357],{"class":356},[80,762,263],{"class":132},[80,764,765,767,769,771,773],{"class":82,"line":249},[80,766,364],{"class":136},[80,768,328],{"class":132},[80,770,369],{"class":165},[80,772,169],{"class":185},[80,774,172],{"class":132},[80,776,777,779,781,783,785,787],{"class":82,"line":255},[80,778,383],{"class":185},[80,780,189],{"class":132},[80,782,146],{"class":132},[80,784,194],{"class":90},[80,786,197],{"class":132},[80,788,200],{"class":132},[80,790,791,793,795,797,799,801],{"class":82,"line":266},[80,792,403],{"class":185},[80,794,189],{"class":132},[80,796,146],{"class":132},[80,798,219],{"class":90},[80,800,197],{"class":132},[80,802,200],{"class":132},[80,804,805,807,809],{"class":82,"line":283},[80,806,443],{"class":185},[80,808,189],{"class":132},[80,810,811],{"class":136}," isReady\n",[80,813,814,817],{"class":82,"line":300},[80,815,816],{"class":132},"      ?",[80,818,263],{"class":132},[80,820,821,824,826,828,830,832],{"class":82,"line":306},[80,822,823],{"class":185},"          type",[80,825,189],{"class":132},[80,827,146],{"class":132},[80,829,276],{"class":90},[80,831,197],{"class":132},[80,833,200],{"class":132},[80,835,837,840,842,844,846,848],{"class":82,"line":836},16,[80,838,839],{"class":185},"          src",[80,841,189],{"class":132},[80,843,146],{"class":132},[80,845,293],{"class":90},[80,847,197],{"class":132},[80,849,200],{"class":132},[80,851,853],{"class":82,"line":852},17,[80,854,855],{"class":132},"        }\n",[80,857,859,862],{"class":82,"line":858},18,[80,860,861],{"class":132},"      :",[80,863,263],{"class":132},[80,865,867,869,871,873,876,878],{"class":82,"line":866},19,[80,868,823],{"class":185},[80,870,189],{"class":132},[80,872,146],{"class":132},[80,874,875],{"class":90},"launch",[80,877,197],{"class":132},[80,879,200],{"class":132},[80,881,883,886,888,890,893,895],{"class":82,"line":882},20,[80,884,885],{"class":185},"          description",[80,887,189],{"class":132},[80,889,146],{"class":132},[80,891,892],{"class":90},"Launch My Module",[80,894,197],{"class":132},[80,896,200],{"class":132},[80,898,900,903,905,907],{"class":82,"line":899},21,[80,901,902],{"class":185},"          actions",[80,904,189],{"class":132},[80,906,583],{"class":185},[80,908,172],{"class":132},[80,910,912,915,917,919,922,924],{"class":82,"line":911},22,[80,913,914],{"class":185},"            label",[80,916,189],{"class":132},[80,918,146],{"class":132},[80,920,921],{"class":90},"Start",[80,923,197],{"class":132},[80,925,200],{"class":132},[80,927,929,932,935,937],{"class":82,"line":928},23,[80,930,931],{"class":356},"            async",[80,933,934],{"class":185}," handle",[80,936,709],{"class":132},[80,938,263],{"class":132},[80,940,942,945,947,950,953],{"class":82,"line":941},24,[80,943,944],{"class":128},"              if",[80,946,346],{"class":185},[80,948,949],{"class":132},"!",[80,951,952],{"class":136},"promise",[80,954,312],{"class":185},[80,956,958,961,963,965],{"class":82,"line":957},25,[80,959,960],{"class":136},"                promise",[80,962,536],{"class":132},[80,964,706],{"class":165},[80,966,967],{"class":185},"()\n",[80,969,971,974],{"class":82,"line":970},26,[80,972,973],{"class":128},"              await",[80,975,976],{"class":136}," promise\n",[80,978,980],{"class":82,"line":979},27,[80,981,982],{"class":132},"            },\n",[80,984,986,989],{"class":82,"line":985},28,[80,987,988],{"class":132},"          }",[80,990,991],{"class":185},"]\n",[80,993,995],{"class":82,"line":994},29,[80,996,997],{"class":132},"        },\n",[80,999,1001,1003],{"class":82,"line":1000},30,[80,1002,487],{"class":132},[80,1004,312],{"class":185},[80,1006,1008,1010],{"class":82,"line":1007},31,[80,1009,309],{"class":132},[80,1011,312],{"class":136},[58,1013,1014,1015,1018],{},"It will first display a launch page with a button to start the service. When user click the button, the ",[77,1016,1017],{},"handle()"," will be called, and the view will be updated to iframe.",[58,1020,1021,1022,1025,1026,1028],{},"When you need to refresh the custom tabs, you can call ",[77,1023,1024],{},"nuxt.callHook('devtools:customTabs:refresh')"," and the hooks on ",[77,1027,338],{}," will be revaluated again.",[62,1030,1032],{"id":1031},"api-for-custom-view","API for Custom View",[58,1034,1035,1036,328],{},"Please refer to ",[630,1037,1039],{"href":1038},"\u002Fmodule\u002Futils-kit#nuxtdevtools-kitiframe-client","Iframe Client",[62,1041,1043],{"id":1042},"custom-rpc-functions","Custom RPC Functions",[58,1045,1046],{},"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.",[58,1048,1049],{},"To do that, we recommend to define your types in a shared TypeScript file first:",[70,1051,1053],{"className":119,"code":1052,"language":121,"meta":75,"style":75},"\u002F\u002F rpc-types.ts\n\nexport interface ServerFunctions {\n  getMyModuleOptions: () => MyModuleOptions\n}\n\nexport interface ClientFunctions {\n  showNotification: (message: string) => void\n}\n",[77,1054,1055,1060,1064,1077,1092,1096,1100,1111,1135],{"__ignoreMap":75},[80,1056,1057],{"class":82,"line":83},[80,1058,1059],{"class":178},"\u002F\u002F rpc-types.ts\n",[80,1061,1062],{"class":82,"line":155},[80,1063,159],{"emptyLinePlaceholder":158},[80,1065,1066,1069,1072,1075],{"class":82,"line":162},[80,1067,1068],{"class":128},"export",[80,1070,1071],{"class":356}," interface",[80,1073,1074],{"class":86}," ServerFunctions",[80,1076,263],{"class":132},[80,1078,1079,1082,1084,1087,1089],{"class":82,"line":175},[80,1080,1081],{"class":185},"  getMyModuleOptions",[80,1083,189],{"class":132},[80,1085,1086],{"class":132}," ()",[80,1088,357],{"class":356},[80,1090,1091],{"class":86}," MyModuleOptions\n",[80,1093,1094],{"class":82,"line":182},[80,1095,618],{"class":132},[80,1097,1098],{"class":82,"line":203},[80,1099,159],{"emptyLinePlaceholder":158},[80,1101,1102,1104,1106,1109],{"class":82,"line":209},[80,1103,1068],{"class":128},[80,1105,1071],{"class":356},[80,1107,1108],{"class":86}," ClientFunctions",[80,1110,263],{"class":132},[80,1112,1113,1116,1118,1120,1123,1125,1128,1130,1132],{"class":82,"line":226},[80,1114,1115],{"class":185},"  showNotification",[80,1117,189],{"class":132},[80,1119,346],{"class":132},[80,1121,1122],{"class":349},"message",[80,1124,189],{"class":132},[80,1126,1127],{"class":86}," string",[80,1129,353],{"class":132},[80,1131,357],{"class":356},[80,1133,1134],{"class":86}," void\n",[80,1136,1137],{"class":82,"line":232},[80,1138,618],{"class":132},[58,1140,1141],{},"And then in your module code:",[70,1143,1145],{"className":119,"code":1144,"language":121,"meta":75,"style":75},"import type { ClientFunctions, ServerFunctions } from '.\u002Frpc-types'\nimport { extendServerRpc, onDevToolsInitialized } from '@nuxt\u002Fdevtools-kit'\nimport { defineNuxtModule } from '@nuxt\u002Fkit'\n\nconst RPC_NAMESPACE = 'my-module-rpc'\n\nexport default defineNuxtModule({\n  setup(options, nuxt) {\n    \u002F\u002F wait for DevTools to be initialized\n    onDevToolsInitialized(async () => {\n      const rpc = extendServerRpc\u003CClientFunctions, ServerFunctions>(RPC_NAMESPACE, {\n        \u002F\u002F register server RPC functions\n        getMyModuleOptions() {\n          return options\n        },\n      })\n\n      \u002F\u002F call client RPC functions\n      \u002F\u002F 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",[77,1146,1147,1173,1197,1217,1221,1237,1241,1254,1273,1278,1293,1325,1330,1339,1347,1351,1358,1362,1367,1372,1400,1407,1412],{"__ignoreMap":75},[80,1148,1149,1151,1154,1156,1158,1160,1162,1164,1166,1168,1171],{"class":82,"line":83},[80,1150,129],{"class":128},[80,1152,1153],{"class":128}," type",[80,1155,133],{"class":132},[80,1157,1108],{"class":136},[80,1159,343],{"class":132},[80,1161,1074],{"class":136},[80,1163,140],{"class":132},[80,1165,143],{"class":128},[80,1167,146],{"class":132},[80,1169,1170],{"class":90},".\u002Frpc-types",[80,1172,152],{"class":132},[80,1174,1175,1177,1179,1182,1184,1187,1189,1191,1193,1195],{"class":82,"line":155},[80,1176,129],{"class":128},[80,1178,133],{"class":132},[80,1180,1181],{"class":136}," extendServerRpc",[80,1183,343],{"class":132},[80,1185,1186],{"class":136}," onDevToolsInitialized",[80,1188,140],{"class":132},[80,1190,143],{"class":128},[80,1192,146],{"class":132},[80,1194,149],{"class":90},[80,1196,152],{"class":132},[80,1198,1199,1201,1203,1206,1208,1210,1212,1215],{"class":82,"line":162},[80,1200,129],{"class":128},[80,1202,133],{"class":132},[80,1204,1205],{"class":136}," defineNuxtModule",[80,1207,140],{"class":132},[80,1209,143],{"class":128},[80,1211,146],{"class":132},[80,1213,1214],{"class":90},"@nuxt\u002Fkit",[80,1216,152],{"class":132},[80,1218,1219],{"class":82,"line":175},[80,1220,159],{"emptyLinePlaceholder":158},[80,1222,1223,1225,1228,1230,1232,1235],{"class":82,"line":182},[80,1224,525],{"class":356},[80,1226,1227],{"class":136}," RPC_NAMESPACE ",[80,1229,655],{"class":132},[80,1231,146],{"class":132},[80,1233,1234],{"class":90},"my-module-rpc",[80,1236,152],{"class":132},[80,1238,1239],{"class":82,"line":203},[80,1240,159],{"emptyLinePlaceholder":158},[80,1242,1243,1245,1248,1250,1252],{"class":82,"line":209},[80,1244,1068],{"class":128},[80,1246,1247],{"class":128}," default",[80,1249,1205],{"class":165},[80,1251,169],{"class":136},[80,1253,172],{"class":132},[80,1255,1256,1259,1261,1264,1266,1269,1271],{"class":82,"line":226},[80,1257,1258],{"class":185},"  setup",[80,1260,169],{"class":132},[80,1262,1263],{"class":349},"options",[80,1265,343],{"class":132},[80,1267,1268],{"class":349}," nuxt",[80,1270,353],{"class":132},[80,1272,263],{"class":132},[80,1274,1275],{"class":82,"line":232},[80,1276,1277],{"class":178},"    \u002F\u002F wait for DevTools to be initialized\n",[80,1279,1280,1283,1285,1287,1289,1291],{"class":82,"line":249},[80,1281,1282],{"class":165},"    onDevToolsInitialized",[80,1284,169],{"class":185},[80,1286,700],{"class":356},[80,1288,1086],{"class":132},[80,1290,357],{"class":356},[80,1292,263],{"class":132},[80,1294,1295,1298,1301,1303,1305,1307,1310,1312,1314,1316,1318,1321,1323],{"class":82,"line":255},[80,1296,1297],{"class":356},"      const",[80,1299,1300],{"class":136}," rpc",[80,1302,536],{"class":132},[80,1304,1181],{"class":165},[80,1306,674],{"class":132},[80,1308,1309],{"class":86},"ClientFunctions",[80,1311,343],{"class":132},[80,1313,1074],{"class":86},[80,1315,680],{"class":132},[80,1317,169],{"class":185},[80,1319,1320],{"class":136},"RPC_NAMESPACE",[80,1322,343],{"class":132},[80,1324,263],{"class":132},[80,1326,1327],{"class":82,"line":266},[80,1328,1329],{"class":178},"        \u002F\u002F register server RPC functions\n",[80,1331,1332,1335,1337],{"class":82,"line":283},[80,1333,1334],{"class":185},"        getMyModuleOptions",[80,1336,709],{"class":132},[80,1338,263],{"class":132},[80,1340,1341,1344],{"class":82,"line":300},[80,1342,1343],{"class":128},"          return",[80,1345,1346],{"class":136}," options\n",[80,1348,1349],{"class":82,"line":306},[80,1350,997],{"class":132},[80,1352,1353,1356],{"class":82,"line":836},[80,1354,1355],{"class":132},"      }",[80,1357,312],{"class":185},[80,1359,1360],{"class":82,"line":852},[80,1361,159],{"emptyLinePlaceholder":158},[80,1363,1364],{"class":82,"line":858},[80,1365,1366],{"class":178},"      \u002F\u002F call client RPC functions\n",[80,1368,1369],{"class":82,"line":866},[80,1370,1371],{"class":178},"      \u002F\u002F since it might have multiple clients connected, we use `broadcast` to call all of them\n",[80,1373,1374,1377,1379,1381,1384,1386,1389,1391,1393,1396,1398],{"class":82,"line":882},[80,1375,1376],{"class":128},"      await",[80,1378,1300],{"class":136},[80,1380,328],{"class":132},[80,1382,1383],{"class":136},"broadcast",[80,1385,328],{"class":132},[80,1387,1388],{"class":165},"showNotification",[80,1390,169],{"class":185},[80,1392,197],{"class":132},[80,1394,1395],{"class":90},"Hello from My Module!",[80,1397,197],{"class":132},[80,1399,312],{"class":185},[80,1401,1402,1405],{"class":82,"line":899},[80,1403,1404],{"class":132},"    }",[80,1406,312],{"class":185},[80,1408,1409],{"class":82,"line":911},[80,1410,1411],{"class":132},"  }\n",[80,1413,1414,1416],{"class":82,"line":928},[80,1415,309],{"class":132},[80,1417,312],{"class":136},[58,1419,1420],{},"And on the embedded iframe client side, you can do:",[70,1422,1424],{"className":119,"code":1423,"language":121,"meta":75,"style":75},"import type { ClientFunctions, ServerFunctions } from '.\u002Frpc-types'\nimport { onDevtoolsClientConnected } from '@nuxt\u002Fdevtools-kit\u002Fiframe-client'\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  \u002F\u002F call server RPC functions\n  const options = await rpc.getMyModuleOptions()\n})\n",[77,1425,1426,1450,1470,1474,1488,1492,1512,1542,1555,1571,1575,1581,1585,1590,1611],{"__ignoreMap":75},[80,1427,1428,1430,1432,1434,1436,1438,1440,1442,1444,1446,1448],{"class":82,"line":83},[80,1429,129],{"class":128},[80,1431,1153],{"class":128},[80,1433,133],{"class":132},[80,1435,1108],{"class":136},[80,1437,343],{"class":132},[80,1439,1074],{"class":136},[80,1441,140],{"class":132},[80,1443,143],{"class":128},[80,1445,146],{"class":132},[80,1447,1170],{"class":90},[80,1449,152],{"class":132},[80,1451,1452,1454,1456,1459,1461,1463,1465,1468],{"class":82,"line":155},[80,1453,129],{"class":128},[80,1455,133],{"class":132},[80,1457,1458],{"class":136}," onDevtoolsClientConnected",[80,1460,140],{"class":132},[80,1462,143],{"class":128},[80,1464,146],{"class":132},[80,1466,1467],{"class":90},"@nuxt\u002Fdevtools-kit\u002Fiframe-client",[80,1469,152],{"class":132},[80,1471,1472],{"class":82,"line":162},[80,1473,159],{"emptyLinePlaceholder":158},[80,1475,1476,1478,1480,1482,1484,1486],{"class":82,"line":175},[80,1477,525],{"class":356},[80,1479,1227],{"class":136},[80,1481,655],{"class":132},[80,1483,146],{"class":132},[80,1485,1234],{"class":90},[80,1487,152],{"class":132},[80,1489,1490],{"class":82,"line":182},[80,1491,159],{"emptyLinePlaceholder":158},[80,1493,1494,1497,1499,1501,1503,1506,1508,1510],{"class":82,"line":203},[80,1495,1496],{"class":165},"onDevtoolsClientConnected",[80,1498,169],{"class":136},[80,1500,700],{"class":356},[80,1502,346],{"class":132},[80,1504,1505],{"class":349},"client",[80,1507,353],{"class":132},[80,1509,357],{"class":356},[80,1511,263],{"class":132},[80,1513,1514,1517,1519,1521,1524,1526,1529,1531,1534,1536,1538,1540],{"class":82,"line":209},[80,1515,1516],{"class":356},"  const",[80,1518,1300],{"class":136},[80,1520,536],{"class":132},[80,1522,1523],{"class":136}," client",[80,1525,328],{"class":132},[80,1527,1528],{"class":136},"devtools",[80,1530,328],{"class":132},[80,1532,1533],{"class":165},"extendClientRpc",[80,1535,169],{"class":185},[80,1537,1320],{"class":136},[80,1539,343],{"class":132},[80,1541,263],{"class":132},[80,1543,1544,1547,1549,1551,1553],{"class":82,"line":226},[80,1545,1546],{"class":185},"    showNotification",[80,1548,169],{"class":132},[80,1550,1122],{"class":349},[80,1552,353],{"class":132},[80,1554,263],{"class":132},[80,1556,1557,1560,1562,1565,1567,1569],{"class":82,"line":232},[80,1558,1559],{"class":136},"      console",[80,1561,328],{"class":132},[80,1563,1564],{"class":165},"log",[80,1566,169],{"class":185},[80,1568,1122],{"class":136},[80,1570,312],{"class":185},[80,1572,1573],{"class":82,"line":249},[80,1574,482],{"class":132},[80,1576,1577,1579],{"class":82,"line":255},[80,1578,487],{"class":132},[80,1580,312],{"class":185},[80,1582,1583],{"class":82,"line":266},[80,1584,159],{"emptyLinePlaceholder":158},[80,1586,1587],{"class":82,"line":283},[80,1588,1589],{"class":178},"  \u002F\u002F call server RPC functions\n",[80,1591,1592,1594,1597,1599,1602,1604,1606,1609],{"class":82,"line":300},[80,1593,1516],{"class":356},[80,1595,1596],{"class":136}," options",[80,1598,536],{"class":132},[80,1600,1601],{"class":128}," await",[80,1603,1300],{"class":136},[80,1605,328],{"class":132},[80,1607,1608],{"class":165},"getMyModuleOptions",[80,1610,967],{"class":185},[80,1612,1613,1615],{"class":82,"line":306},[80,1614,309],{"class":132},[80,1616,312],{"class":136},[62,1618,1620],{"id":1619},"trying-local-changes","Trying Local Changes",[58,1622,1623],{},"You can clone Nuxt DevTools repo and try your changes locally.",[58,1625,1035,1626,328],{},[630,1627,1620],{"href":1628},"\u002Fdevelopment\u002Fcontributing#trying-local-changes",[62,1630,1632],{"id":1631},"examples","Examples",[58,1634,1635],{},"Here are a few examples of how to integrate Nuxt DevTools in modules:",[1637,1638,1639,1648,1655,1662,1669,1676],"ul",{},[1640,1641,1642],"li",{},[630,1643,1647],{"href":1644,"rel":1645},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fdevtools\u002Fblob\u002Fa8d372bd10d34d8c2fba2613558df2b9b99d6ff9\u002Fpackages\u002Fdevtools\u002Fsrc\u002Fintegrations\u002Fvscode.ts#L140-L172",[1646],"nofollow","Built-in VS Code integration with lazy initialize",[1640,1649,1650],{},[630,1651,1654],{"href":1652,"rel":1653},"https:\u002F\u002Fgithub.com\u002Fvueuse\u002Fvueuse\u002Fblob\u002Fce28cef154489c73abe308104bef8568594a9bcd\u002Fpackages\u002Fnuxt\u002Findex.ts#L89-L99",[1646],"VueUse adds a docs tab",[1640,1656,1657],{},[630,1658,1661],{"href":1659,"rel":1660},"https:\u002F\u002Fgithub.com\u002Funocss\u002Funocss\u002Fblob\u002F25021a751494e99e85cfd82cca3855cdf78f6a12\u002Fpackages\u002Fnuxt\u002Fsrc\u002Findex.ts#L81-L94",[1646],"UnoCSS Inspector",[1640,1663,1664],{},[630,1665,1668],{"href":1666,"rel":1667},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Ftest-utils\u002Fblob\u002Ffd024f45f752c2faa4c9e0cc1fc1f8b3eae59553\u002Fsrc\u002Fmodule.ts#L150-L192",[1646],"Nuxt Test Utils",[1640,1670,1671],{},[630,1672,1675],{"href":1673,"rel":1674},"https:\u002F\u002Fgithub.com\u002Fnuxt-modules\u002Fog-image\u002Fblob\u002F551b5474b44b8ff3190643e861c0b453813683b0\u002Fsrc\u002Fbuild\u002Fdevtools.ts#L65-L80",[1646],"Nuxt OG Image Playground",[1640,1677,1678],{},[630,1679,1682],{"href":1680,"rel":1681},"https:\u002F\u002Fgithub.com\u002Farashsheyda\u002Fnuxt-mongoose\u002Fblob\u002F89d50bd977de0f4edfdbe3ed150d0dca4d040709\u002Fsrc\u002Fdevtools.ts#L38-L48",[1646],"Nuxt Mongoose",[1684,1685,1686],"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 .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 .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}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":75,"searchDepth":155,"depth":155,"links":1688},[1689,1690,1693,1694,1695,1696,1697],{"id":64,"depth":155,"text":65},{"id":109,"depth":155,"text":110,"children":1691},[1692],{"id":499,"depth":162,"text":500},{"id":635,"depth":155,"text":636},{"id":1031,"depth":155,"text":1032},{"id":1042,"depth":155,"text":1043},{"id":1619,"depth":155,"text":1620},{"id":1631,"depth":155,"text":1632},"Add your own modules integration to the Nuxt DevTools.","md",{},{"title":28,"description":1698},"sBh4V_CKzPZR4rKObYmrt4CF83B26aM7AxYLZzVxpRY",[1704,1706],{"title":18,"path":19,"stem":20,"description":1705,"children":-1},"Open or control Nuxt DevTools with the useNuxtDevtools composable.",{"title":32,"path":33,"stem":34,"description":1707,"children":-1},"Utility kit for easier DevTools integrations.",1774568848203]