[{"data":1,"prerenderedAt":2421},["ShallowReactive",2],{"navigation":3,"docs-\u002Fmodule\u002Fmigration-v4":56,"docs-\u002Fmodule\u002Fmigration-v4-surround":2416},[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":44,"body":58,"description":2411,"extension":2412,"meta":2413,"navigation":523,"path":45,"seo":2414,"stem":46,"__hash__":2415},"docs\u002F2.module\u002F3.migration-v4.md",{"type":59,"value":60,"toc":2380},"minimark",[61,111,117,122,125,132,144,148,402,414,418,472,482,486,504,617,640,1072,1079,1096,1203,1207,1219,1334,1368,1375,1387,1432,1436,1453,1562,1569,1690,1698,1708,1712,1723,1790,1809,1875,1885,1892,1914,1950,1957,1990,2025,2032,2053,2078,2082,2100,2183,2190,2194,2200,2221,2236,2243,2259,2263,2347,2351,2376],[62,63,64,65,72,73,77,78,77,81,77,84,87,88,94,95,99,100,77,103,106,107,110],"p",{},"Nuxt DevTools v4 is a ",[66,67,71],"a",{"href":68,"rel":69},"https:\u002F\u002Fgithub.com\u002Fvitejs\u002Fdevtools",[70],"nofollow","Vite DevTools"," integration. The Nuxt-specific hooks and helpers of v3 (",[74,75,76],"code",{},"addCustomTab",", ",[74,79,80],{},"extendServerRpc",[74,82,83],{},"startSubprocess",[74,85,86],{},"devtools:customTabs",", …) are replaced by one entry point, ",[66,89,91],{"href":90},"\u002Fmodule\u002Futils-kit#ondevtoolsready",[74,92,93],{},"onDevtoolsReady()",", which hands you the Vite DevTools node context. From there you register ",[96,97,98],"strong",{},"docks"," (tabs), ",[96,101,102],{},"RPC functions",[96,104,105],{},"terminals"," and ",[96,108,109],{},"messages"," on the same hosts every other Vite tool uses.",[62,112,113,114,116],{},"If you only use Nuxt DevTools in your app, read ",[66,115,22],{"href":23}," instead.",[118,119,121],"h2",{"id":120},"should-i-migrate-now","Should I migrate now?",[62,123,124],{},"Yes. DevTools v4 runs on Nuxt 4.5+ and Nuxt 5, so the new API covers every Nuxt version that can run v4.",[62,126,127,128,131],{},"The v3 API keeps working on v4 through compatibility shims, each of which prints a coded ",[74,129,130],{},"NDT_DEP_xxxx"," warning in the user's terminal with a link to the matching section below. Those shims stay for the whole v4 cycle and are removed in v5.",[62,133,134,135,139,140,143],{},"A migrated module requires DevTools v4. On a project still running DevTools v3 (Nuxt 4 without the ",[66,136,138],{"href":137},"\u002Fguide\u002Fupgrading-to-v4#nuxt-45","override","), the ",[74,141,142],{},"devtools:ready"," hook never fires and your integration simply does not register; nothing breaks.",[118,145,147],{"id":146},"at-a-glance","At a glance",[149,150,151,167],"table",{},[152,153,154],"thead",{},[155,156,157,161,164],"tr",{},[158,159,160],"th",{},"v3",[158,162,163],{},"v4",[158,165,166],{},"Warning",[168,169,170,194,219,237,257,280,303,323,346,362,381],"tbody",{},[155,171,172,181,186],{},[173,174,175,178,179],"td",{},[74,176,177],{},"addCustomTab()"," \u002F ",[74,180,86],{},[173,182,183],{},[74,184,185],{},"ctx.docks.register({ type: 'iframe', … })",[173,187,188],{},[66,189,191],{"href":190},"#ndt_dep_0005",[74,192,193],{},"NDT_DEP_0005",[155,195,196,201,211],{},[173,197,198],{},[74,199,200],{},"refreshCustomTabs()",[173,202,203,206,207,210],{},[74,204,205],{},"ctx.docks.register(entry, true)"," or the ",[74,208,209],{},"update()"," handle",[173,212,213],{},[66,214,216],{"href":215},"#ndt_dep_0006",[74,217,218],{},"NDT_DEP_0006",[155,220,221,226,231],{},[173,222,223],{},[74,224,225],{},"view: { type: 'launch' }",[173,227,228],{},[74,229,230],{},"ctx.docks.register({ type: 'launcher', … })",[173,232,233],{},[66,234,235],{"href":190},[74,236,193],{},[155,238,239,244,249],{},[173,240,241],{},[74,242,243],{},"extendServerRpc()",[173,245,246],{},[74,247,248],{},"ctx.scope('my-module').rpc.register()",[173,250,251],{},[66,252,254],{"href":253},"#ndt_dep_0003",[74,255,256],{},"NDT_DEP_0003",[155,258,259,267,272],{},[173,260,261,178,264],{},[74,262,263],{},"nuxt.devtools.rpc.broadcast",[74,265,266],{},".functions",[173,268,269],{},[74,270,271],{},"ctx.scope('my-module').rpc.broadcast()",[173,273,274],{},[66,275,277],{"href":276},"#ndt_dep_0007",[74,278,279],{},"NDT_DEP_0007",[155,281,282,290,295],{},[173,283,284,178,287],{},[74,285,286],{},"startSubprocess()",[74,288,289],{},"devtools:terminal:*",[173,291,292],{},[74,293,294],{},"ctx.terminals.startChildProcess()",[173,296,297],{},[66,298,300],{"href":299},"#ndt_dep_0004",[74,301,302],{},"NDT_DEP_0004",[155,304,305,310,315],{},[173,306,307],{},[74,308,309],{},"startSubprocess().getProcess()",[173,311,312],{},[74,313,314],{},".getResult()",[173,316,317],{},[66,318,320],{"href":319},"#ndt_dep_0001",[74,321,322],{},"NDT_DEP_0001",[155,324,325,331,338],{},[173,326,327,330],{},[74,328,329],{},"getServerData"," RPC",[173,332,333,334,337],{},"Data Inspector ",[74,335,336],{},"Nuxt Application"," source",[173,339,340],{},[66,341,343],{"href":342},"#ndt_dep_0009",[74,344,345],{},"NDT_DEP_0009",[155,347,348,354,359],{},[173,349,350,353],{},[74,351,352],{},"client.devtools.extendClientRpc()"," (iframe)",[173,355,356],{},[74,357,358],{},"kit.scope('my-module').rpc.register()",[173,360,361],{},"console warning",[155,363,364,369,378],{},[173,365,366,353],{},[74,367,368],{},"useDevtoolsClient()",[173,370,371,374,375],{},[74,372,373],{},"getDevToolsRpcClient()"," from ",[74,376,377],{},"@vitejs\u002Fdevtools-kit\u002Fclient",[173,379,380],{},"—",[155,382,383,389,394],{},[173,384,385,388],{},[74,386,387],{},"devtools.vscode"," option",[173,390,391],{},[74,392,393],{},"devtools.codeServer",[173,395,396],{},[66,397,399],{"href":398},"#ndt_dep_0008",[74,400,401],{},"NDT_DEP_0008",[62,403,404,405,413],{},"The rest of this page walks through a migration in the order you will hit it. The repo's ",[66,406,409,412],{"href":407,"rel":408},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fdevtools\u002Ftree\u002Fmain\u002Fplaygrounds\u002Fmodule-starter",[70],[74,410,411],{},"module-starter"," playground"," is the finished result.",[118,415,417],{"id":416},"step-1-dependencies","Step 1: dependencies",[419,420,426],"pre",{"className":421,"code":422,"filename":423,"language":424,"meta":425,"style":425},"language-diff shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"dependencies\": {\n-   \"@nuxt\u002Fdevtools-kit\": \"^3.0.0\"\n+   \"@nuxt\u002Fdevtools-kit\": \"^4.0.0\",\n+   \"@vitejs\u002Fdevtools-kit\": \"^0.7.6\"\n  }\n}\n","package.json","diff","",[74,427,428,436,442,448,454,460,466],{"__ignoreMap":425},[429,430,433],"span",{"class":431,"line":432},"line",1,[429,434,435],{},"{\n",[429,437,439],{"class":431,"line":438},2,[429,440,441],{},"  \"dependencies\": {\n",[429,443,445],{"class":431,"line":444},3,[429,446,447],{},"-   \"@nuxt\u002Fdevtools-kit\": \"^3.0.0\"\n",[429,449,451],{"class":431,"line":450},4,[429,452,453],{},"+   \"@nuxt\u002Fdevtools-kit\": \"^4.0.0\",\n",[429,455,457],{"class":431,"line":456},5,[429,458,459],{},"+   \"@vitejs\u002Fdevtools-kit\": \"^0.7.6\"\n",[429,461,463],{"class":431,"line":462},6,[429,464,465],{},"  }\n",[429,467,469],{"class":431,"line":468},7,[429,470,471],{},"}\n",[62,473,474,477,478,481],{},[74,475,476],{},"@vitejs\u002Fdevtools-kit"," provides the browser-side RPC client for your iframe and the types for the node context. Keep ",[74,479,480],{},"@nuxt\u002Fdevtools"," as a dev dependency for your playground.",[118,483,485],{"id":484},"step-2-register-your-tab-as-a-dock-entry-ndt_dep_0005","Step 2: register your tab as a dock entry {#ndt_dep_0005}",[62,487,488,490,491,493,494,496,497,499,500,503],{},[74,489,177],{}," and the ",[74,492,86],{}," hook are deprecated (",[74,495,193],{},"). Register a dock entry from ",[74,498,93],{}," and put it in the ",[74,501,502],{},"Nuxt"," group so it shows up next to the built-in tabs:",[419,505,507],{"className":421,"code":506,"language":424,"meta":425,"style":425},"- import { addCustomTab } from '@nuxt\u002Fdevtools-kit'\n+ import { NUXT_DEVTOOLS_GROUP_ID, onDevtoolsReady } from '@nuxt\u002Fdevtools-kit'\n\n- addCustomTab({\n-   name: 'my-module',\n-   title: 'My Module',\n-   icon: 'carbon:apps',\n-   view: { type: 'iframe', src: '\u002F__my-module' },\n- })\n+ onDevtoolsReady((ctx) => {\n+   ctx.docks.register({\n+     id: 'my-module',\n+     title: 'My Module',\n+     icon: 'carbon:apps',\n+     type: 'iframe',\n+     url: '\u002F__my-module',\n+     groupId: NUXT_DEVTOOLS_GROUP_ID,\n+   })\n+ })\n",[74,508,509,514,519,525,530,535,540,545,551,557,563,569,575,581,587,593,599,605,611],{"__ignoreMap":425},[429,510,511],{"class":431,"line":432},[429,512,513],{},"- import { addCustomTab } from '@nuxt\u002Fdevtools-kit'\n",[429,515,516],{"class":431,"line":438},[429,517,518],{},"+ import { NUXT_DEVTOOLS_GROUP_ID, onDevtoolsReady } from '@nuxt\u002Fdevtools-kit'\n",[429,520,521],{"class":431,"line":444},[429,522,524],{"emptyLinePlaceholder":523},true,"\n",[429,526,527],{"class":431,"line":450},[429,528,529],{},"- addCustomTab({\n",[429,531,532],{"class":431,"line":456},[429,533,534],{},"-   name: 'my-module',\n",[429,536,537],{"class":431,"line":462},[429,538,539],{},"-   title: 'My Module',\n",[429,541,542],{"class":431,"line":468},[429,543,544],{},"-   icon: 'carbon:apps',\n",[429,546,548],{"class":431,"line":547},8,[429,549,550],{},"-   view: { type: 'iframe', src: '\u002F__my-module' },\n",[429,552,554],{"class":431,"line":553},9,[429,555,556],{},"- })\n",[429,558,560],{"class":431,"line":559},10,[429,561,562],{},"+ onDevtoolsReady((ctx) => {\n",[429,564,566],{"class":431,"line":565},11,[429,567,568],{},"+   ctx.docks.register({\n",[429,570,572],{"class":431,"line":571},12,[429,573,574],{},"+     id: 'my-module',\n",[429,576,578],{"class":431,"line":577},13,[429,579,580],{},"+     title: 'My Module',\n",[429,582,584],{"class":431,"line":583},14,[429,585,586],{},"+     icon: 'carbon:apps',\n",[429,588,590],{"class":431,"line":589},15,[429,591,592],{},"+     type: 'iframe',\n",[429,594,596],{"class":431,"line":595},16,[429,597,598],{},"+     url: '\u002F__my-module',\n",[429,600,602],{"class":431,"line":601},17,[429,603,604],{},"+     groupId: NUXT_DEVTOOLS_GROUP_ID,\n",[429,606,608],{"class":431,"line":607},18,[429,609,610],{},"+   })\n",[429,612,614],{"class":431,"line":613},19,[429,615,616],{},"+ })\n",[62,618,619,620,623,624,77,627,623,630,77,633,623,636,639],{},"Field mapping: ",[74,621,622],{},"name"," → ",[74,625,626],{},"id",[74,628,629],{},"view.src",[74,631,632],{},"url",[74,634,635],{},"view.type",[74,637,638],{},"type",". Icons are Iconify names or image URLs, as before.",[641,642,643,683,1048,1060],"ul",{},[644,645,646,649,650,653,654,77,657,77,660,77,663,77,666,77,669,672,673,675,676,678,679,682],"li",{},[96,647,648],{},"Categories."," Set ",[74,651,652],{},"category"," on the entry (",[74,655,656],{},"app",[74,658,659],{},"analyze",[74,661,662],{},"server",[74,664,665],{},"modules",[74,667,668],{},"documentation",[74,670,671],{},"advanced",") to pick its section inside the ",[74,674,502],{}," group. Legacy custom tabs are listed under ",[74,677,665],{},"; set ",[74,680,681],{},"category: 'modules'"," to sit beside them.",[644,684,685,688,689,691,692,695,696,698,699,702,703],{},[96,686,687],{},"Lazy launch."," Replace ",[74,690,225],{}," with a native ",[74,693,694],{},"launcher"," entry, then re-register the same ",[74,697,626],{}," as an ",[74,700,701],{},"iframe"," once the service is up (the second argument forces the replacement):",[419,704,708],{"className":705,"code":706,"language":707,"meta":425,"style":425},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","onDevtoolsReady((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        await startInspector()\n        ctx.docks.register({\n          id: 'my-module',\n          title: 'My Module',\n          icon: 'carbon:apps',\n          type: 'iframe',\n          url: '\u002F__my-module',\n          groupId: NUXT_DEVTOOLS_GROUP_ID,\n        }, true)\n      },\n    },\n  })\n})\n","ts",[74,709,710,737,757,778,794,810,825,837,846,862,878,891,903,920,935,950,965,980,996,1007,1020,1026,1032,1040],{"__ignoreMap":425},[429,711,712,716,720,723,727,730,734],{"class":431,"line":432},[429,713,715],{"class":714},"s2Zo4","onDevtoolsReady",[429,717,719],{"class":718},"sTEyZ","(",[429,721,719],{"class":722},"sMK4o",[429,724,726],{"class":725},"sHdIc","ctx",[429,728,729],{"class":722},")",[429,731,733],{"class":732},"spNyl"," =>",[429,735,736],{"class":722}," {\n",[429,738,739,742,745,747,749,752,755],{"class":431,"line":438},[429,740,741],{"class":718},"  ctx",[429,743,744],{"class":722},".",[429,746,98],{"class":718},[429,748,744],{"class":722},[429,750,751],{"class":714},"register",[429,753,719],{"class":754},"swJcz",[429,756,435],{"class":722},[429,758,759,762,765,768,772,775],{"class":431,"line":444},[429,760,761],{"class":754},"    id",[429,763,764],{"class":722},":",[429,766,767],{"class":722}," '",[429,769,771],{"class":770},"sfazB","my-module",[429,773,774],{"class":722},"'",[429,776,777],{"class":722},",\n",[429,779,780,783,785,787,790,792],{"class":431,"line":450},[429,781,782],{"class":754},"    title",[429,784,764],{"class":722},[429,786,767],{"class":722},[429,788,789],{"class":770},"My Module",[429,791,774],{"class":722},[429,793,777],{"class":722},[429,795,796,799,801,803,806,808],{"class":431,"line":456},[429,797,798],{"class":754},"    icon",[429,800,764],{"class":722},[429,802,767],{"class":722},[429,804,805],{"class":770},"carbon:apps",[429,807,774],{"class":722},[429,809,777],{"class":722},[429,811,812,815,817,819,821,823],{"class":431,"line":462},[429,813,814],{"class":754},"    type",[429,816,764],{"class":722},[429,818,767],{"class":722},[429,820,694],{"class":770},[429,822,774],{"class":722},[429,824,777],{"class":722},[429,826,827,830,832,835],{"class":431,"line":468},[429,828,829],{"class":754},"    groupId",[429,831,764],{"class":722},[429,833,834],{"class":718}," NUXT_DEVTOOLS_GROUP_ID",[429,836,777],{"class":722},[429,838,839,842,844],{"class":431,"line":547},[429,840,841],{"class":754},"    launcher",[429,843,764],{"class":722},[429,845,736],{"class":722},[429,847,848,851,853,855,858,860],{"class":431,"line":553},[429,849,850],{"class":754},"      title",[429,852,764],{"class":722},[429,854,767],{"class":722},[429,856,857],{"class":770},"Start My Module",[429,859,774],{"class":722},[429,861,777],{"class":722},[429,863,864,867,869,871,874,876],{"class":431,"line":559},[429,865,866],{"class":754},"      description",[429,868,764],{"class":722},[429,870,767],{"class":722},[429,872,873],{"class":770},"Starts the inspector server on demand.",[429,875,774],{"class":722},[429,877,777],{"class":722},[429,879,880,883,886,889],{"class":431,"line":565},[429,881,882],{"class":732},"      async",[429,884,885],{"class":754}," onLaunch",[429,887,888],{"class":722},"()",[429,890,736],{"class":722},[429,892,893,897,900],{"class":431,"line":571},[429,894,896],{"class":895},"s7zQu","        await",[429,898,899],{"class":714}," startInspector",[429,901,902],{"class":754},"()\n",[429,904,905,908,910,912,914,916,918],{"class":431,"line":577},[429,906,907],{"class":718},"        ctx",[429,909,744],{"class":722},[429,911,98],{"class":718},[429,913,744],{"class":722},[429,915,751],{"class":714},[429,917,719],{"class":754},[429,919,435],{"class":722},[429,921,922,925,927,929,931,933],{"class":431,"line":583},[429,923,924],{"class":754},"          id",[429,926,764],{"class":722},[429,928,767],{"class":722},[429,930,771],{"class":770},[429,932,774],{"class":722},[429,934,777],{"class":722},[429,936,937,940,942,944,946,948],{"class":431,"line":589},[429,938,939],{"class":754},"          title",[429,941,764],{"class":722},[429,943,767],{"class":722},[429,945,789],{"class":770},[429,947,774],{"class":722},[429,949,777],{"class":722},[429,951,952,955,957,959,961,963],{"class":431,"line":595},[429,953,954],{"class":754},"          icon",[429,956,764],{"class":722},[429,958,767],{"class":722},[429,960,805],{"class":770},[429,962,774],{"class":722},[429,964,777],{"class":722},[429,966,967,970,972,974,976,978],{"class":431,"line":601},[429,968,969],{"class":754},"          type",[429,971,764],{"class":722},[429,973,767],{"class":722},[429,975,701],{"class":770},[429,977,774],{"class":722},[429,979,777],{"class":722},[429,981,982,985,987,989,992,994],{"class":431,"line":607},[429,983,984],{"class":754},"          url",[429,986,764],{"class":722},[429,988,767],{"class":722},[429,990,991],{"class":770},"\u002F__my-module",[429,993,774],{"class":722},[429,995,777],{"class":722},[429,997,998,1001,1003,1005],{"class":431,"line":613},[429,999,1000],{"class":754},"          groupId",[429,1002,764],{"class":722},[429,1004,834],{"class":718},[429,1006,777],{"class":722},[429,1008,1010,1013,1017],{"class":431,"line":1009},20,[429,1011,1012],{"class":722},"        },",[429,1014,1016],{"class":1015},"sfNiH"," true",[429,1018,1019],{"class":754},")\n",[429,1021,1023],{"class":431,"line":1022},21,[429,1024,1025],{"class":722},"      },\n",[429,1027,1029],{"class":431,"line":1028},22,[429,1030,1031],{"class":722},"    },\n",[429,1033,1035,1038],{"class":431,"line":1034},23,[429,1036,1037],{"class":722},"  }",[429,1039,1019],{"class":754},[429,1041,1043,1046],{"class":431,"line":1042},24,[429,1044,1045],{"class":722},"}",[429,1047,1019],{"class":718},[644,1049,1050,1053,1054,1057,1058,744],{},[96,1051,1052],{},"Leaving the group."," Omit ",[74,1055,1056],{},"groupId"," to register a top-level dock next to Vue DevTools and Vite Inspect instead of inside ",[74,1059,502],{},[644,1061,1062,1068,1069,1071],{},[96,1063,1064,1067],{},[74,1065,1066],{},"vnode"," views"," have no native equivalent: a dock renders in its own iframe, so it cannot receive a Vue vnode from the Nuxt client. Move the UI into an iframe page, or keep ",[74,1070,177],{}," for that tab until you do.",[1073,1074,1076,1078],"h3",{"id":1075},"refreshcustomtabs-ndt_dep_0006",[74,1077,200],{}," {#ndt_dep_0006}",[62,1080,1081,1082,1084,1085,1088,1089,1092,1093,1095],{},"Deprecated (",[74,1083,218],{},"). There is no tab list to re-collect; change the entry itself. ",[74,1086,1087],{},"register()"," returns a handle for patching the fields of an entry, and ",[74,1090,1091],{},"register(entry, true)"," replaces it wholesale (for example to change its ",[74,1094,638],{},", as in the launcher example above):",[419,1097,1099],{"className":705,"code":1098,"language":707,"meta":425,"style":425},"onDevtoolsReady((ctx) => {\n  const entry = ctx.docks.register({ id: 'my-module', \u002F* … *\u002F })\n  entry.update({ badge: '3' })\n})\n",[74,1100,1101,1117,1167,1197],{"__ignoreMap":425},[429,1102,1103,1105,1107,1109,1111,1113,1115],{"class":431,"line":432},[429,1104,715],{"class":714},[429,1106,719],{"class":718},[429,1108,719],{"class":722},[429,1110,726],{"class":725},[429,1112,729],{"class":722},[429,1114,733],{"class":732},[429,1116,736],{"class":722},[429,1118,1119,1122,1125,1128,1131,1133,1135,1137,1139,1141,1144,1147,1149,1151,1153,1155,1158,1162,1165],{"class":431,"line":438},[429,1120,1121],{"class":732},"  const",[429,1123,1124],{"class":718}," entry",[429,1126,1127],{"class":722}," =",[429,1129,1130],{"class":718}," ctx",[429,1132,744],{"class":722},[429,1134,98],{"class":718},[429,1136,744],{"class":722},[429,1138,751],{"class":714},[429,1140,719],{"class":754},[429,1142,1143],{"class":722},"{",[429,1145,1146],{"class":754}," id",[429,1148,764],{"class":722},[429,1150,767],{"class":722},[429,1152,771],{"class":770},[429,1154,774],{"class":722},[429,1156,1157],{"class":722},",",[429,1159,1161],{"class":1160},"sHwdD"," \u002F* … *\u002F",[429,1163,1164],{"class":722}," }",[429,1166,1019],{"class":754},[429,1168,1169,1172,1174,1177,1179,1181,1184,1186,1188,1191,1193,1195],{"class":431,"line":444},[429,1170,1171],{"class":718},"  entry",[429,1173,744],{"class":722},[429,1175,1176],{"class":714},"update",[429,1178,719],{"class":754},[429,1180,1143],{"class":722},[429,1182,1183],{"class":754}," badge",[429,1185,764],{"class":722},[429,1187,767],{"class":722},[429,1189,1190],{"class":770},"3",[429,1192,774],{"class":722},[429,1194,1164],{"class":722},[429,1196,1019],{"class":754},[429,1198,1199,1201],{"class":431,"line":450},[429,1200,1045],{"class":722},[429,1202,1019],{"class":718},[118,1204,1206],{"id":1205},"step-3-server-rpc-ndt_dep_0003","Step 3: server RPC {#ndt_dep_0003}",[62,1208,1209,1211,1212,1214,1215,1218],{},[74,1210,243],{}," is deprecated (",[74,1213,256],{},"). Register functions on the Vite DevTools RPC host. Use ",[74,1216,1217],{},"ctx.scope()"," so every name is prefixed with your namespace without you repeating it:",[419,1220,1222],{"className":421,"code":1221,"language":424,"meta":425,"style":425},"- import { extendServerRpc, onDevToolsInitialized } from '@nuxt\u002Fdevtools-kit'\n+ import { onDevtoolsReady } from '@nuxt\u002Fdevtools-kit'\n\n- onDevToolsInitialized(() => {\n-   const rpc = extendServerRpc('my-module', {\n-     toUpperCase(t: string) {\n-       rpc.broadcast.greeting('world')\n-       return t.toUpperCase()\n-     },\n-   })\n- })\n+ onDevtoolsReady((ctx) => {\n+   const { rpc } = ctx.scope('my-module')\n+\n+   rpc.register({\n+     name: 'to-upper-case', \u002F\u002F registered as `my-module:to-upper-case`\n+     type: 'query',\n+     handler(t: string) {\n+       rpc.broadcast({ method: 'greeting', args: ['world'], event: true })\n+       return t.toUpperCase()\n+     },\n+   })\n+ })\n",[74,1223,1224,1229,1234,1238,1243,1248,1253,1258,1263,1268,1273,1277,1281,1286,1291,1296,1301,1306,1311,1316,1321,1326,1330],{"__ignoreMap":425},[429,1225,1226],{"class":431,"line":432},[429,1227,1228],{},"- import { extendServerRpc, onDevToolsInitialized } from '@nuxt\u002Fdevtools-kit'\n",[429,1230,1231],{"class":431,"line":438},[429,1232,1233],{},"+ import { onDevtoolsReady } from '@nuxt\u002Fdevtools-kit'\n",[429,1235,1236],{"class":431,"line":444},[429,1237,524],{"emptyLinePlaceholder":523},[429,1239,1240],{"class":431,"line":450},[429,1241,1242],{},"- onDevToolsInitialized(() => {\n",[429,1244,1245],{"class":431,"line":456},[429,1246,1247],{},"-   const rpc = extendServerRpc('my-module', {\n",[429,1249,1250],{"class":431,"line":462},[429,1251,1252],{},"-     toUpperCase(t: string) {\n",[429,1254,1255],{"class":431,"line":468},[429,1256,1257],{},"-       rpc.broadcast.greeting('world')\n",[429,1259,1260],{"class":431,"line":547},[429,1261,1262],{},"-       return t.toUpperCase()\n",[429,1264,1265],{"class":431,"line":553},[429,1266,1267],{},"-     },\n",[429,1269,1270],{"class":431,"line":559},[429,1271,1272],{},"-   })\n",[429,1274,1275],{"class":431,"line":565},[429,1276,556],{},[429,1278,1279],{"class":431,"line":571},[429,1280,562],{},[429,1282,1283],{"class":431,"line":577},[429,1284,1285],{},"+   const { rpc } = ctx.scope('my-module')\n",[429,1287,1288],{"class":431,"line":583},[429,1289,1290],{},"+\n",[429,1292,1293],{"class":431,"line":589},[429,1294,1295],{},"+   rpc.register({\n",[429,1297,1298],{"class":431,"line":595},[429,1299,1300],{},"+     name: 'to-upper-case', \u002F\u002F registered as `my-module:to-upper-case`\n",[429,1302,1303],{"class":431,"line":601},[429,1304,1305],{},"+     type: 'query',\n",[429,1307,1308],{"class":431,"line":607},[429,1309,1310],{},"+     handler(t: string) {\n",[429,1312,1313],{"class":431,"line":613},[429,1314,1315],{},"+       rpc.broadcast({ method: 'greeting', args: ['world'], event: true })\n",[429,1317,1318],{"class":431,"line":1009},[429,1319,1320],{},"+       return t.toUpperCase()\n",[429,1322,1323],{"class":431,"line":1022},[429,1324,1325],{},"+     },\n",[429,1327,1328],{"class":431,"line":1028},[429,1329,610],{},[429,1331,1332],{"class":431,"line":1034},[429,1333,616],{},[62,1335,1336,1338,1339,1342,1343,1346,1347,1350,1351,1354,1355,178,1358,1361,1362,1367],{},[74,1337,638],{}," is ",[74,1340,1341],{},"'query'"," for reads, ",[74,1344,1345],{},"'action'"," for mutations, ",[74,1348,1349],{},"'event'"," for fire-and-forget and ",[74,1352,1353],{},"'static'"," for values that never change. Pass ",[74,1356,1357],{},"args",[74,1359,1360],{},"returns"," ",[66,1363,1366],{"href":1364,"rel":1365},"https:\u002F\u002Fstandardschema.dev\u002F",[70],"Standard Schema"," validators to type and validate a function at the boundary.",[1073,1369,1371,1374],{"id":1370},"nuxtdevtoolsrpc-direct-access-ndt_dep_0007",[74,1372,1373],{},"nuxt.devtools.rpc"," direct access {#ndt_dep_0007}",[62,1376,1377,1378,1380,1381,1211,1384,1386],{},"Reading ",[74,1379,263],{}," or writing to ",[74,1382,1383],{},"nuxt.devtools.rpc.functions",[74,1385,279],{},"). Both map onto the scoped RPC host above:",[419,1388,1390],{"className":421,"code":1389,"language":424,"meta":425,"style":425},"- nuxt.devtools.rpc.broadcast.myEvent.asEvent(payload)\n+ onDevtoolsReady((ctx) => {\n+   ctx.scope('my-module').rpc.broadcast({ method: 'my-event', args: [payload], event: true })\n+ })\n\n- nuxt.devtools.rpc.functions.myFn = handler\n+ onDevtoolsReady((ctx) => {\n+   ctx.scope('my-module').rpc.register({ name: 'my-fn', handler })\n+ })\n",[74,1391,1392,1397,1401,1406,1410,1414,1419,1423,1428],{"__ignoreMap":425},[429,1393,1394],{"class":431,"line":432},[429,1395,1396],{},"- nuxt.devtools.rpc.broadcast.myEvent.asEvent(payload)\n",[429,1398,1399],{"class":431,"line":438},[429,1400,562],{},[429,1402,1403],{"class":431,"line":444},[429,1404,1405],{},"+   ctx.scope('my-module').rpc.broadcast({ method: 'my-event', args: [payload], event: true })\n",[429,1407,1408],{"class":431,"line":450},[429,1409,616],{},[429,1411,1412],{"class":431,"line":456},[429,1413,524],{"emptyLinePlaceholder":523},[429,1415,1416],{"class":431,"line":462},[429,1417,1418],{},"- nuxt.devtools.rpc.functions.myFn = handler\n",[429,1420,1421],{"class":431,"line":468},[429,1422,562],{},[429,1424,1425],{"class":431,"line":547},[429,1426,1427],{},"+   ctx.scope('my-module').rpc.register({ name: 'my-fn', handler })\n",[429,1429,1430],{"class":431,"line":553},[429,1431,616],{},[118,1433,1435],{"id":1434},"step-4-the-iframe-client","Step 4: the iframe client",[62,1437,1438,1439,1442,1443,106,1445,1448,1449,1452],{},"A native dock is rendered by Vite DevTools, not by the Nuxt client, so the ",[74,1440,1441],{},"__NUXT_DEVTOOLS__"," object that ",[74,1444,368],{},[74,1446,1447],{},"onDevtoolsClientConnected()"," rely on is ",[96,1450,1451],{},"not injected"," into it. Connect to Vite DevTools directly instead:",[419,1454,1456],{"className":421,"code":1455,"language":424,"meta":425,"style":425},"- import { onDevtoolsClientConnected } from '@nuxt\u002Fdevtools-kit\u002Fiframe-client'\n+ import { getDevToolsRpcClient } from '@vitejs\u002Fdevtools-kit\u002Fclient'\n\n- onDevtoolsClientConnected(async (client) => {\n-   const rpc = client.devtools.extendClientRpc('my-module', {\n-     greeting(t: string) {\n-       console.log(`Hello ${t}`)\n-     },\n-   })\n-   const result = await rpc.toUpperCase('hello')\n- })\n+ const kit = await getDevToolsRpcClient()\n+ const { rpc } = kit.scope('my-module')\n+\n+ rpc.register({\n+   name: 'greeting', \u002F\u002F receives the `my-module:greeting` broadcast\n+   type: 'event',\n+   handler(t: string) {\n+     console.log(`Hello ${t}`)\n+   },\n+ })\n+ const result = await rpc.call('to-upper-case', 'hello')\n",[74,1457,1458,1463,1468,1472,1477,1482,1487,1492,1496,1500,1505,1509,1514,1519,1523,1528,1533,1538,1543,1548,1553,1557],{"__ignoreMap":425},[429,1459,1460],{"class":431,"line":432},[429,1461,1462],{},"- import { onDevtoolsClientConnected } from '@nuxt\u002Fdevtools-kit\u002Fiframe-client'\n",[429,1464,1465],{"class":431,"line":438},[429,1466,1467],{},"+ import { getDevToolsRpcClient } from '@vitejs\u002Fdevtools-kit\u002Fclient'\n",[429,1469,1470],{"class":431,"line":444},[429,1471,524],{"emptyLinePlaceholder":523},[429,1473,1474],{"class":431,"line":450},[429,1475,1476],{},"- onDevtoolsClientConnected(async (client) => {\n",[429,1478,1479],{"class":431,"line":456},[429,1480,1481],{},"-   const rpc = client.devtools.extendClientRpc('my-module', {\n",[429,1483,1484],{"class":431,"line":462},[429,1485,1486],{},"-     greeting(t: string) {\n",[429,1488,1489],{"class":431,"line":468},[429,1490,1491],{},"-       console.log(`Hello ${t}`)\n",[429,1493,1494],{"class":431,"line":547},[429,1495,1267],{},[429,1497,1498],{"class":431,"line":553},[429,1499,1272],{},[429,1501,1502],{"class":431,"line":559},[429,1503,1504],{},"-   const result = await rpc.toUpperCase('hello')\n",[429,1506,1507],{"class":431,"line":565},[429,1508,556],{},[429,1510,1511],{"class":431,"line":571},[429,1512,1513],{},"+ const kit = await getDevToolsRpcClient()\n",[429,1515,1516],{"class":431,"line":577},[429,1517,1518],{},"+ const { rpc } = kit.scope('my-module')\n",[429,1520,1521],{"class":431,"line":583},[429,1522,1290],{},[429,1524,1525],{"class":431,"line":589},[429,1526,1527],{},"+ rpc.register({\n",[429,1529,1530],{"class":431,"line":595},[429,1531,1532],{},"+   name: 'greeting', \u002F\u002F receives the `my-module:greeting` broadcast\n",[429,1534,1535],{"class":431,"line":601},[429,1536,1537],{},"+   type: 'event',\n",[429,1539,1540],{"class":431,"line":607},[429,1541,1542],{},"+   handler(t: string) {\n",[429,1544,1545],{"class":431,"line":613},[429,1546,1547],{},"+     console.log(`Hello ${t}`)\n",[429,1549,1550],{"class":431,"line":1009},[429,1551,1552],{},"+   },\n",[429,1554,1555],{"class":431,"line":1022},[429,1556,616],{},[429,1558,1559],{"class":431,"line":1028},[429,1560,1561],{},"+ const result = await rpc.call('to-upper-case', 'hello')\n",[62,1563,1564,1565,1568],{},"The user's app is the parent window of every dock iframe, so the host client that v3 exposed as ",[74,1566,1567],{},"client.host"," is still reachable on it from a same-origin iframe:",[419,1570,1572],{"className":705,"code":1571,"language":707,"meta":425,"style":425},"import type { NuxtDevtoolsHostClient } from '@nuxt\u002Fdevtools-kit\u002Ftypes'\n\nconst host = (window.parent as Window & { __NUXT_DEVTOOLS_HOST__?: NuxtDevtoolsHostClient }).__NUXT_DEVTOOLS_HOST__\nhost?.nuxt.vueApp.version\nhost?.devtools.close()\n",[74,1573,1574,1601,1605,1653,1674],{"__ignoreMap":425},[429,1575,1576,1579,1582,1585,1588,1590,1593,1595,1598],{"class":431,"line":432},[429,1577,1578],{"class":895},"import",[429,1580,1581],{"class":895}," type",[429,1583,1584],{"class":722}," {",[429,1586,1587],{"class":718}," NuxtDevtoolsHostClient",[429,1589,1164],{"class":722},[429,1591,1592],{"class":895}," from",[429,1594,767],{"class":722},[429,1596,1597],{"class":770},"@nuxt\u002Fdevtools-kit\u002Ftypes",[429,1599,1600],{"class":722},"'\n",[429,1602,1603],{"class":431,"line":438},[429,1604,524],{"emptyLinePlaceholder":523},[429,1606,1607,1610,1613,1616,1619,1621,1624,1627,1631,1634,1636,1639,1642,1644,1646,1648,1650],{"class":431,"line":444},[429,1608,1609],{"class":732},"const",[429,1611,1612],{"class":718}," host ",[429,1614,1615],{"class":722},"=",[429,1617,1618],{"class":718}," (window",[429,1620,744],{"class":722},[429,1622,1623],{"class":718},"parent ",[429,1625,1626],{"class":895},"as",[429,1628,1630],{"class":1629},"sBMFI"," Window",[429,1632,1633],{"class":722}," &",[429,1635,1584],{"class":722},[429,1637,1638],{"class":754}," __NUXT_DEVTOOLS_HOST__",[429,1640,1641],{"class":722},"?:",[429,1643,1587],{"class":1629},[429,1645,1164],{"class":722},[429,1647,729],{"class":718},[429,1649,744],{"class":722},[429,1651,1652],{"class":718},"__NUXT_DEVTOOLS_HOST__\n",[429,1654,1655,1658,1661,1664,1666,1669,1671],{"class":431,"line":450},[429,1656,1657],{"class":718},"host",[429,1659,1660],{"class":722},"?.",[429,1662,1663],{"class":718},"nuxt",[429,1665,744],{"class":722},[429,1667,1668],{"class":718},"vueApp",[429,1670,744],{"class":722},[429,1672,1673],{"class":718},"version\n",[429,1675,1676,1678,1680,1683,1685,1688],{"class":431,"line":456},[429,1677,1657],{"class":718},[429,1679,1660],{"class":722},[429,1681,1682],{"class":718},"devtools",[429,1684,744],{"class":722},[429,1686,1687],{"class":714},"close",[429,1689,902],{"class":718},[62,1691,1692,1338,1694,1697],{},[74,1693,1657],{},[74,1695,1696],{},"undefined"," when your page is opened outside DevTools or served from another origin.",[62,1699,1700,1702,1703,1705,1706,744],{},[74,1701,352],{}," is deprecated and logs a console warning; ",[74,1704,368],{}," still works for tabs that are still registered through ",[74,1707,177],{},[118,1709,1711],{"id":1710},"step-5-terminals-ndt_dep_0004","Step 5: terminals {#ndt_dep_0004}",[62,1713,1714,1211,1716,1718,1719,1722],{},[74,1715,286],{},[74,1717,302],{},"). Spawn processes through the Vite DevTools terminals host; they show up in the shared ",[96,1720,1721],{},"Terminals"," dock with restart and terminate controls:",[419,1724,1726],{"className":421,"code":1725,"language":424,"meta":425,"style":425},"- import { startSubprocess } from '@nuxt\u002Fdevtools-kit'\n+ import { onDevtoolsReady } from '@nuxt\u002Fdevtools-kit'\n\n- const subprocess = startSubprocess(\n-   { command: 'vite', args: ['build', '--watch'] },\n-   { id: 'my-module:build', name: 'Build', icon: 'ph:terminal-duotone' },\n- )\n+ onDevtoolsReady(async (ctx) => {\n+   const session = await ctx.terminals.startChildProcess(\n+     { command: 'vite', args: ['build', '--watch'], cwd: process.cwd() },\n+     { id: 'my-module:build', title: 'Build', icon: 'ph:terminal-duotone' },\n+   )\n+ })\n",[74,1727,1728,1733,1737,1741,1746,1751,1756,1761,1766,1771,1776,1781,1786],{"__ignoreMap":425},[429,1729,1730],{"class":431,"line":432},[429,1731,1732],{},"- import { startSubprocess } from '@nuxt\u002Fdevtools-kit'\n",[429,1734,1735],{"class":431,"line":438},[429,1736,1233],{},[429,1738,1739],{"class":431,"line":444},[429,1740,524],{"emptyLinePlaceholder":523},[429,1742,1743],{"class":431,"line":450},[429,1744,1745],{},"- const subprocess = startSubprocess(\n",[429,1747,1748],{"class":431,"line":456},[429,1749,1750],{},"-   { command: 'vite', args: ['build', '--watch'] },\n",[429,1752,1753],{"class":431,"line":462},[429,1754,1755],{},"-   { id: 'my-module:build', name: 'Build', icon: 'ph:terminal-duotone' },\n",[429,1757,1758],{"class":431,"line":468},[429,1759,1760],{},"- )\n",[429,1762,1763],{"class":431,"line":547},[429,1764,1765],{},"+ onDevtoolsReady(async (ctx) => {\n",[429,1767,1768],{"class":431,"line":553},[429,1769,1770],{},"+   const session = await ctx.terminals.startChildProcess(\n",[429,1772,1773],{"class":431,"line":559},[429,1774,1775],{},"+     { command: 'vite', args: ['build', '--watch'], cwd: process.cwd() },\n",[429,1777,1778],{"class":431,"line":565},[429,1779,1780],{},"+     { id: 'my-module:build', title: 'Build', icon: 'ph:terminal-duotone' },\n",[429,1782,1783],{"class":431,"line":571},[429,1784,1785],{},"+   )\n",[429,1787,1788],{"class":431,"line":577},[429,1789,616],{},[62,1791,1792,1793,77,1796,77,1799,106,1802,1805,1806,764],{},"The session exposes ",[74,1794,1795],{},"terminate()",[74,1797,1798],{},"restart()",[74,1800,1801],{},"getChildProcess()",[74,1803,1804],{},"getResult()",", an awaitable ",[74,1807,1808],{},"{ stdout, stderr, exitCode }",[419,1810,1812],{"className":705,"code":1811,"language":707,"meta":425,"style":425},"const { exitCode, stderr } = await session.getResult()\nif (exitCode !== 0)\n  console.error(stderr)\n",[74,1813,1814,1845,1862],{"__ignoreMap":425},[429,1815,1816,1818,1820,1823,1825,1828,1830,1832,1835,1838,1840,1843],{"class":431,"line":432},[429,1817,1609],{"class":732},[429,1819,1584],{"class":722},[429,1821,1822],{"class":718}," exitCode",[429,1824,1157],{"class":722},[429,1826,1827],{"class":718}," stderr ",[429,1829,1045],{"class":722},[429,1831,1127],{"class":722},[429,1833,1834],{"class":895}," await",[429,1836,1837],{"class":718}," session",[429,1839,744],{"class":722},[429,1841,1842],{"class":714},"getResult",[429,1844,902],{"class":718},[429,1846,1847,1850,1853,1856,1860],{"class":431,"line":438},[429,1848,1849],{"class":895},"if",[429,1851,1852],{"class":718}," (exitCode ",[429,1854,1855],{"class":722},"!==",[429,1857,1859],{"class":1858},"sbssI"," 0",[429,1861,1019],{"class":718},[429,1863,1864,1867,1869,1872],{"class":431,"line":444},[429,1865,1866],{"class":718},"  console",[429,1868,744],{"class":722},[429,1870,1871],{"class":714},"error",[429,1873,1874],{"class":718},"(stderr)\n",[62,1876,1877,1880,1881,1884],{},[74,1878,1879],{},"ctx.terminals.startPtySession()"," gives you an interactive PTY, and ",[74,1882,1883],{},"ctx.terminals.register({ id, title, status, stream })"," surfaces output from a process you keep owning yourself.",[1073,1886,1888,1889,1891],{"id":1887},"legacy-devtoolsterminal-hooks","Legacy ",[74,1890,289],{}," hooks",[62,1893,1894,1895,178,1898,178,1901,178,1904,1907,1908,1910,1911,764],{},"Calling ",[74,1896,1897],{},"devtools:terminal:register",[74,1899,1900],{},":write",[74,1902,1903],{},":exit",[74,1905,1906],{},":remove"," directly (which is what ",[74,1909,286],{}," does internally) is bridged onto the Terminals dock ",[96,1912,1913],{},"for output and final status only",[641,1915,1916,1931,1940],{},[644,1917,1918,178,1921,106,1924,178,1927,1930],{},[74,1919,1920],{},"restartable",[74,1922,1923],{},"terminatable",[74,1925,1926],{},"onActionRestart",[74,1928,1929],{},"onActionTerminate"," are ignored: no buttons are shown for a bridged session;",[644,1932,1933,1934,178,1937,1939],{},"re-registering an id (",[74,1935,1936],{},"clear()",[74,1938,1798],{},") shows up as a new session rather than resetting the old one in place;",[644,1941,1942,178,1944,1946,1947,1949],{},[74,1943,1795],{},[74,1945,1798],{}," on a ",[74,1948,286],{}," handle still work, because that helper owns its process.",[1073,1951,1953,1956],{"id":1952},"subprocessoptions-no-longer-extends-execa",[74,1954,1955],{},"SubprocessOptions"," no longer extends execa",[62,1958,1959,1961,1962,1965,1966,1969,1970,77,1973,77,1975,106,1978,1981,1982,1985,1986,1989],{},[74,1960,286],{}," moved from ",[74,1963,1964],{},"execa"," to ",[74,1967,1968],{},"tinyexec",". ",[74,1971,1972],{},"command",[74,1974,1357],{},[74,1976,1977],{},"cwd",[74,1979,1980],{},"env"," are unchanged; every other execa option goes under ",[74,1983,1984],{},"nodeOptions"," (Node's ",[74,1987,1988],{},"SpawnOptions","):",[419,1991,1993],{"className":421,"code":1992,"language":424,"meta":425,"style":425},"startSubprocess({\n  command: 'my-command',\n  cwd: '\u002Fsome\u002Fpath',\n- stdio: 'pipe',\n+ nodeOptions: { stdio: 'pipe' },\n})\n",[74,1994,1995,2000,2005,2010,2015,2020],{"__ignoreMap":425},[429,1996,1997],{"class":431,"line":432},[429,1998,1999],{},"startSubprocess({\n",[429,2001,2002],{"class":431,"line":438},[429,2003,2004],{},"  command: 'my-command',\n",[429,2006,2007],{"class":431,"line":444},[429,2008,2009],{},"  cwd: '\u002Fsome\u002Fpath',\n",[429,2011,2012],{"class":431,"line":450},[429,2013,2014],{},"- stdio: 'pipe',\n",[429,2016,2017],{"class":431,"line":456},[429,2018,2019],{},"+ nodeOptions: { stdio: 'pipe' },\n",[429,2021,2022],{"class":431,"line":462},[429,2023,2024],{},"})\n",[1073,2026,2028,2031],{"id":2027},"getprocess-ndt_dep_0001",[74,2029,2030],{},"getProcess()"," {#ndt_dep_0001}",[62,2033,1081,2034,2036,2037,2040,2041,2043,2044,77,2047,106,2050,764],{},[74,2035,322],{},"); it returns a plain ",[74,2038,2039],{},"ChildProcess | undefined"," now. ",[74,2042,1804],{}," returns the tinyexec result with ",[74,2045,2046],{},".process",[74,2048,2049],{},".kill()",[74,2051,2052],{},".pipe()",[419,2054,2056],{"className":421,"code":2055,"language":424,"meta":425,"style":425},"- const proc = subprocess.getProcess()\n- proc.stdout.on('data', handler)\n+ const result = subprocess.getResult()\n+ result.process?.stdout?.on('data', handler)\n",[74,2057,2058,2063,2068,2073],{"__ignoreMap":425},[429,2059,2060],{"class":431,"line":432},[429,2061,2062],{},"- const proc = subprocess.getProcess()\n",[429,2064,2065],{"class":431,"line":438},[429,2066,2067],{},"- proc.stdout.on('data', handler)\n",[429,2069,2070],{"class":431,"line":444},[429,2071,2072],{},"+ const result = subprocess.getResult()\n",[429,2074,2075],{"class":431,"line":450},[429,2076,2077],{},"+ result.process?.stdout?.on('data', handler)\n",[118,2079,2081],{"id":2080},"step-6-notifications","Step 6: notifications",[62,2083,2084,2087,2088,2091,2092,2095,2096,2099],{},[74,2085,2086],{},"ctx.messages"," is the Vite DevTools messages host. ",[74,2089,2090],{},"ctx.messages.add({ message, level, notify })"," adds an entry to the ",[96,2093,2094],{},"Messages"," dock; ",[74,2097,2098],{},"notify: true"," also shows it as a toast:",[419,2101,2103],{"className":705,"code":2102,"language":707,"meta":425,"style":425},"onDevtoolsReady((ctx) => {\n  ctx.messages.add({ message: 'My module is ready', level: 'info', notify: true })\n})\n",[74,2104,2105,2121,2177],{"__ignoreMap":425},[429,2106,2107,2109,2111,2113,2115,2117,2119],{"class":431,"line":432},[429,2108,715],{"class":714},[429,2110,719],{"class":718},[429,2112,719],{"class":722},[429,2114,726],{"class":725},[429,2116,729],{"class":722},[429,2118,733],{"class":732},[429,2120,736],{"class":722},[429,2122,2123,2125,2127,2129,2131,2134,2136,2138,2141,2143,2145,2148,2150,2152,2155,2157,2159,2162,2164,2166,2169,2171,2173,2175],{"class":431,"line":438},[429,2124,741],{"class":718},[429,2126,744],{"class":722},[429,2128,109],{"class":718},[429,2130,744],{"class":722},[429,2132,2133],{"class":714},"add",[429,2135,719],{"class":754},[429,2137,1143],{"class":722},[429,2139,2140],{"class":754}," message",[429,2142,764],{"class":722},[429,2144,767],{"class":722},[429,2146,2147],{"class":770},"My module is ready",[429,2149,774],{"class":722},[429,2151,1157],{"class":722},[429,2153,2154],{"class":754}," level",[429,2156,764],{"class":722},[429,2158,767],{"class":722},[429,2160,2161],{"class":770},"info",[429,2163,774],{"class":722},[429,2165,1157],{"class":722},[429,2167,2168],{"class":754}," notify",[429,2170,764],{"class":722},[429,2172,1016],{"class":1015},[429,2174,1164],{"class":722},[429,2176,1019],{"class":754},[429,2178,2179,2181],{"class":431,"line":444},[429,2180,1045],{"class":722},[429,2182,1019],{"class":718},[62,2184,2185,2186,2189],{},"The ",[74,2187,2188],{},"devtools:notify"," Nuxt hook forwards to the same host and is not deprecated.",[118,2191,2193],{"id":2192},"other-changes","Other changes",[1073,2195,2197,2199],{"id":2196},"getserverdata-rpc-ndt_dep_0009",[74,2198,329],{}," RPC {#ndt_dep_0009}",[62,2201,2202,2203,2207,2208,2210,2211,2213,2214,2217,2218,2220],{},"The read-only Nuxt Options Viewer is replaced by the ",[66,2204,2206],{"href":2205},"\u002Fguide\u002Ffeatures#data-inspector","Data Inspector",", whose ",[74,2209,336],{}," source exposes the same data through a live jora workbench. The ",[74,2212,329],{}," RPC that fed the old page still answers with the legacy ",[74,2215,2216],{},"{ nuxt, nitro, vite: { server, client } }"," shape but prints ",[74,2219,345],{}," on first use.",[62,2222,2223,2224,2231,2232,2235],{},"To expose your own data, install ",[66,2225,2228],{"href":2226,"rel":2227},"https:\u002F\u002Fnpmx.dev\u002Fpackage\u002F@devframes\u002Fplugin-data-inspector",[70],[74,2229,2230],{},"@devframes\u002Fplugin-data-inspector"," and register a source with its ",[74,2233,2234],{},"registerDataSource"," API.",[1073,2237,2239,2242],{"id":2238},"vscode-option-ndt_dep_0008",[74,2240,2241],{},"vscode"," option {#ndt_dep_0008}",[62,2244,2245,2246,2248,2249,2251,2252,2254,2255,2258],{},"The built-in VS Code integration is replaced by the Code Server plugin (",[74,2247,393],{},"). Supplying ",[74,2250,387],{}," prints ",[74,2253,401],{}," and the value is ignored. See ",[66,2256,22],{"href":2257},"\u002Fguide\u002Fupgrading-to-v4#code-server"," for the user-facing details.",[1073,2260,2262],{"id":2261},"removed-apis","Removed APIs",[641,2264,2265,2295,2308,2322,2335],{},[644,2266,2267,77,2270,490,2273,2276,2277,2280,2281,2284,2285,77,2288,106,2291,2294],{},[74,2268,2269],{},"@nuxt\u002Fdevtools-wizard",[74,2271,2272],{},"nuxi devtools enable\u002Fdisable",[74,2274,2275],{},"runWizard"," RPC. The one action that remains, ",[74,2278,2279],{},"enablePages",", is a direct RPC function with no arguments: ",[74,2282,2283],{},"rpc.enablePages()",". The ",[74,2286,2287],{},"WizardFunctions",[74,2289,2290],{},"WizardActions",[74,2292,2293],{},"GetWizardArgs"," types are gone.",[644,2296,2297,2300,2301,178,2304,2307],{},[74,2298,2299],{},"client.devtools.popup"," (Picture-in-Picture) and the ",[74,2302,2303],{},"showPanel",[74,2305,2306],{},"minimizePanelInactive"," UI settings; Vite DevTools owns the panel.",[644,2309,2310,2311,2314,2315,2318,2319,744],{},"Global installs: ",[74,2312,2313],{},"devtoolsGlobal",", the ",[74,2316,2317],{},"-g"," install flag and ",[74,2320,2321],{},"NuxtDevtoolsInfo.isGlobalInstall",[644,2323,2185,2324,2327,2328,2330,2331,2334],{},[74,2325,2326],{},"viteDevTools"," module option; Vite DevTools is always on. On Vite 8.3+ Nuxt DevTools configures Vite's top-level ",[74,2329,1682],{}," option, so ",[74,2332,2333],{},"vite: { devtools: false }"," turns it off.",[644,2336,2337,178,2340,178,2343,2346],{},[74,2338,2339],{},"client.devtools.open()",[74,2341,2342],{},"close()",[74,2344,2345],{},"toggle()"," still exist and now drive the Vite DevTools panel.",[1073,2348,2350],{"id":2349},"peer-dependencies","Peer dependencies",[62,2352,2353,2355,2356,2359,2360,2363,2364,2367,2368,2371,2372,2375],{},[74,2354,480],{}," requires Vite ",[74,2357,2358],{},"^8.1.5"," (was ",[74,2361,2362],{},">=6.0",") and ",[74,2365,2366],{},"@nuxt\u002Fkit"," 4 or 5. Nitro v2 (",[74,2369,2370],{},"nitropack",", Nuxt 4) and Nitro v3 (",[74,2373,2374],{},"nitro",", Nuxt 5) are both optional peers; the one your user's Nuxt installs is the one that gets used.",[2377,2378,2379],"style",{},"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":425,"searchDepth":438,"depth":438,"links":2381},[2382,2383,2384,2385,2389,2393,2394,2402,2403],{"id":120,"depth":438,"text":121},{"id":146,"depth":438,"text":147},{"id":416,"depth":438,"text":417},{"id":484,"depth":438,"text":485,"children":2386},[2387],{"id":1075,"depth":444,"text":2388},"refreshCustomTabs() {#ndt_dep_0006}",{"id":1205,"depth":438,"text":1206,"children":2390},[2391],{"id":1370,"depth":444,"text":2392},"nuxt.devtools.rpc direct access {#ndt_dep_0007}",{"id":1434,"depth":438,"text":1435},{"id":1710,"depth":438,"text":1711,"children":2395},[2396,2398,2400],{"id":1887,"depth":444,"text":2397},"Legacy devtools:terminal:* hooks",{"id":1952,"depth":444,"text":2399},"SubprocessOptions no longer extends execa",{"id":2027,"depth":444,"text":2401},"getProcess() {#ndt_dep_0001}",{"id":2080,"depth":438,"text":2081},{"id":2192,"depth":438,"text":2193,"children":2404},[2405,2407,2409,2410],{"id":2196,"depth":444,"text":2406},"getServerData RPC {#ndt_dep_0009}",{"id":2238,"depth":444,"text":2408},"vscode option {#ndt_dep_0008}",{"id":2261,"depth":444,"text":2262},{"id":2349,"depth":444,"text":2350},"Move your module integration from the Nuxt DevTools v3 API to the Vite DevTools based v4 API.","md",{},{"title":44,"description":2411},"oGILVAnen0zhG1aEXGLnOSExErcQaQqL9t9dd5Xindw",[2417,2419],{"title":40,"path":41,"stem":42,"description":2418,"children":-1},"UI Kit is for module authors to build a custom view.",{"title":53,"path":54,"stem":55,"description":2420,"children":-1},"Learn how to contribute to the Nuxt DevTools.",1791526615799]