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