[{"data":1,"prerenderedAt":698},["ShallowReactive",2],{"navigation":3,"-guide-basics-nested-apps":193,"-guide-basics-nested-apps-surround":693},[4,91,138,170,177],{"title":5,"path":6,"stem":7,"children":8,"icon":90},"Guide","/guide","1.guide/0.index",[9,12,53,69],{"title":10,"path":6,"stem":7,"icon":11},"Getting Started","pixel:play",{"title":5,"icon":13,"path":14,"stem":15,"children":16,"page":52},"ph:book-open-duotone","/guide/basics","1.guide/1.basics",[17,22,27,32,37,42,47],{"title":18,"path":19,"stem":20,"icon":21},"Request Lifecycle","/guide/basics/lifecycle","1.guide/1.basics/1.lifecycle","icon-park-outline:handle-round",{"title":23,"path":24,"stem":25,"icon":26},"Routing","/guide/basics/routing","1.guide/1.basics/2.routing","solar:routing-bold",{"title":28,"path":29,"stem":30,"icon":31},"Middleware","/guide/basics/middleware","1.guide/1.basics/3.middleware","mdi:middleware-outline",{"title":33,"path":34,"stem":35,"icon":36},"Event Handlers","/guide/basics/handler","1.guide/1.basics/4.handler","mdi:function",{"title":38,"path":39,"stem":40,"icon":41},"Sending Response","/guide/basics/response","1.guide/1.basics/5.response","tabler:json",{"title":43,"path":44,"stem":45,"icon":46},"Error Handling","/guide/basics/error","1.guide/1.basics/6.error","tabler:error-404",{"title":48,"path":49,"stem":50,"icon":51},"Nested Apps","/guide/basics/nested-apps","1.guide/1.basics/7.nested-apps","material-symbols-light:layers-outline",false,{"title":54,"icon":55,"path":56,"stem":57,"children":58,"page":52},"API","material-symbols-light:api-rounded","/guide/api","1.guide/900.api",[59,64],{"title":60,"path":61,"stem":62,"icon":63},"H3","/guide/api/h3","1.guide/900.api/1.h3","material-symbols:bolt-rounded",{"title":65,"path":66,"stem":67,"icon":68},"H3Event","/guide/api/h3event","1.guide/900.api/2.h3event","material-symbols:data-object-rounded",{"title":70,"icon":71,"path":72,"stem":73,"children":74,"page":52},"Advanced","hugeicons:more-01","/guide/advanced","1.guide/901.advanced",[75,80,85],{"title":76,"path":77,"stem":78,"icon":79},"Plugins","/guide/advanced/plugins","1.guide/901.advanced/1.plugins","clarity:plugin-line",{"title":81,"path":82,"stem":83,"icon":84},"WebSockets","/guide/advanced/websocket","1.guide/901.advanced/2.websocket","hugeicons:live-streaming-02",{"title":86,"path":87,"stem":88,"icon":89},"Nightly Builds","/guide/advanced/nightly","1.guide/901.advanced/9.nightly","game-icons:barn-owl","i-ph:book-open-duotone",{"title":92,"path":93,"stem":94,"children":95,"icon":97},"Utils","/utils","2.utils/0.index",[96,98,103,108,113,118,123,128,133],{"title":92,"path":93,"stem":94,"icon":97},"ph:function-bold",{"title":99,"path":100,"stem":101,"icon":102},"Request","/utils/request","2.utils/1.request","material-symbols-light:input",{"title":104,"path":105,"stem":106,"icon":107},"Response","/utils/response","2.utils/2.response","material-symbols-light:output",{"title":109,"path":110,"stem":111,"icon":112},"Cookie","/utils/cookie","2.utils/3.cookie","material-symbols:cookie-outline",{"title":114,"path":115,"stem":116,"icon":117},"Security","/utils/security","2.utils/4.security","wpf:key-security",{"title":119,"path":120,"stem":121,"icon":122},"Proxy","/utils/proxy","2.utils/5.proxy","arcticons:super-proxy",{"title":124,"path":125,"stem":126,"icon":127},"MCP","/utils/mcp","2.utils/6.mcp","material-symbols:swap-calls",{"title":129,"path":130,"stem":131,"icon":132},"More utils","/utils/more","2.utils/9.more","mingcute:plus-line",{"title":134,"path":135,"stem":136,"icon":137},"Community","/utils/community","2.utils/99.community","lets-icons:external",{"title":139,"path":140,"stem":141,"children":142,"icon":144},"Examples","/examples","4.examples/0.index",[143,145,150,154,158,162,166],{"title":139,"path":140,"stem":141,"icon":144},"ph:code",{"title":146,"path":147,"stem":148,"icon":149},"Cookies","/examples/handle-cookie","4.examples/handle-cookie","ph:arrow-right",{"title":151,"path":152,"stem":153,"icon":149},"HTTP QUERY Method","/examples/handle-query","4.examples/handle-query",{"title":155,"path":156,"stem":157,"icon":149},"Sessions","/examples/handle-session","4.examples/handle-session",{"title":159,"path":160,"stem":161,"icon":149},"Static Assets","/examples/serve-static-assets","4.examples/serve-static-assets",{"title":163,"path":164,"stem":165,"icon":149},"Stream Response","/examples/stream-response","4.examples/stream-response",{"title":167,"path":168,"stem":169,"icon":149},"Validate Data","/examples/validate-data","4.examples/validate-data",{"title":171,"path":172,"stem":173,"children":174,"icon":176},"Migration","/migration","5.migration/0.index",[175],{"title":171,"path":172,"stem":173,"icon":176},"icons8:up-round",{"title":178,"path":179,"stem":180,"children":181},"Blog","/blog","99.blog",[182,185,189],{"title":178,"path":179,"stem":183,"icon":184},"99.blog/index","i-lucide-file-text",{"title":186,"path":187,"stem":188,"icon":184},"H3 1.8 - Towards the Edge of the Web","/blog/v1.8","99.blog/1.v1.8",{"title":190,"path":191,"stem":192,"icon":184},"H3 v2 beta","/blog/v2-beta","99.blog/2.v2-beta",{"id":194,"title":48,"body":195,"description":687,"extension":688,"meta":689,"navigation":690,"path":49,"seo":691,"stem":50,"__hash__":692},"content/1.guide/1.basics/7.nested-apps.md",{"type":196,"value":197,"toc":683,"icon":51},"minimark",[198,211,225,230,238,431,452,458,462,482,491,664,679],[199,200,201,202,205,206,210],"p",{},"Typically, H3 projects consist of several ",[203,204,33],"a",{"href":34}," defined in one or multiple files (or even ",[203,207,209],{"href":208},"/guide/basics/handler#lazy-handlers","lazy loaded"," for faster startup times).",[199,212,213,214,217,218,224],{},"It is sometimes more convenient to combine multiple ",[215,216,60],"code",{}," instances or even use another HTTP framework used by a different team and mount it to the main app instance. H3 provides a native ",[203,219,221],{"href":220},"/guide/api/h3#h3mount",[215,222,223],{},".mount"," method to facilitate this.",[226,227,229],"h2",{"id":228},"nested-h3-apps","Nested H3 Apps",[199,231,232,233,237],{},"H3 natively allows mounting sub-apps. When mounted, sub-app routes and middleware are ",[234,235,236],"strong",{},"merged"," with the base url prefix into the main app instance.",[239,240,245],"pre",{"className":241,"code":242,"language":243,"meta":244,"style":244},"language-js shiki shiki-themes github-light github-dark github-dark","import { H3, serve } from \"h3\";\n\nconst nestedApp = new H3()\n  .use((event) => {\n    event.res.headers.set(\"x-api\", \"1\");\n  })\n  .get(\"/**:slug\", (event) => ({\n    pathname: event.url.pathname,\n    slug: event.context.params?.slug,\n  }));\n\nconst app = new H3().mount(\"/api\", nestedApp);\n","js","",[215,246,247,270,277,300,325,349,355,380,386,392,398,403],{"__ignoreMap":244},[248,249,252,256,260,263,267],"span",{"class":250,"line":251},"line",1,[248,253,255],{"class":254},"so5gQ","import",[248,257,259],{"class":258},"slsVL"," { H3, serve } ",[248,261,262],{"class":254},"from",[248,264,266],{"class":265},"sfrk1"," \"h3\"",[248,268,269],{"class":258},";\n",[248,271,273],{"class":250,"line":272},2,[248,274,276],{"emptyLinePlaceholder":275},true,"\n",[248,278,280,283,287,290,293,297],{"class":250,"line":279},3,[248,281,282],{"class":254},"const",[248,284,286],{"class":285},"suiK_"," nestedApp",[248,288,289],{"class":254}," =",[248,291,292],{"class":254}," new",[248,294,296],{"class":295},"shcOC"," H3",[248,298,299],{"class":258},"()\n",[248,301,303,306,309,312,316,319,322],{"class":250,"line":302},4,[248,304,305],{"class":258},"  .",[248,307,308],{"class":295},"use",[248,310,311],{"class":258},"((",[248,313,315],{"class":314},"sQHwn","event",[248,317,318],{"class":258},") ",[248,320,321],{"class":254},"=>",[248,323,324],{"class":258}," {\n",[248,326,328,331,334,337,340,343,346],{"class":250,"line":327},5,[248,329,330],{"class":258},"    event.res.headers.",[248,332,333],{"class":295},"set",[248,335,336],{"class":258},"(",[248,338,339],{"class":265},"\"x-api\"",[248,341,342],{"class":258},", ",[248,344,345],{"class":265},"\"1\"",[248,347,348],{"class":258},");\n",[248,350,352],{"class":250,"line":351},6,[248,353,354],{"class":258},"  })\n",[248,356,358,360,363,365,368,371,373,375,377],{"class":250,"line":357},7,[248,359,305],{"class":258},[248,361,362],{"class":295},"get",[248,364,336],{"class":258},[248,366,367],{"class":265},"\"/**:slug\"",[248,369,370],{"class":258},", (",[248,372,315],{"class":314},[248,374,318],{"class":258},[248,376,321],{"class":254},[248,378,379],{"class":258}," ({\n",[248,381,383],{"class":250,"line":382},8,[248,384,385],{"class":258},"    pathname: event.url.pathname,\n",[248,387,389],{"class":250,"line":388},9,[248,390,391],{"class":258},"    slug: event.context.params?.slug,\n",[248,393,395],{"class":250,"line":394},10,[248,396,397],{"class":258},"  }));\n",[248,399,401],{"class":250,"line":400},11,[248,402,276],{"emptyLinePlaceholder":275},[248,404,406,408,411,413,415,417,420,423,425,428],{"class":250,"line":405},12,[248,407,282],{"class":254},[248,409,410],{"class":285}," app",[248,412,289],{"class":254},[248,414,292],{"class":254},[248,416,296],{"class":295},[248,418,419],{"class":258},"().",[248,421,422],{"class":295},"mount",[248,424,336],{"class":258},[248,426,427],{"class":265},"\"/api\"",[248,429,430],{"class":258},", nestedApp);\n",[199,432,433,434,437,438,441,442,444,445,441,448,451],{},"In the example above, when fetching the ",[215,435,436],{},"/api/test"," URL, ",[215,439,440],{},"pathname"," will be ",[215,443,436],{}," (the real path), and ",[215,446,447],{},"slug",[215,449,450],{},"/test"," (wildcard param).",[453,454,455],"note",{},[199,456,457],{},"\nGlobal config and hooks won't be inherited from the nested app. Consider always setting them from the main app.",[226,459,461],{"id":460},"nested-web-standard-apps","Nested Web Standard Apps",[199,463,464,465,468,469,475,476,481],{},"Mount a ",[215,466,467],{},".fetch"," compatible server instance like ",[203,470,474],{"href":471,"rel":472},"https://hono.dev/",[473],"nofollow","Hono"," or ",[203,477,480],{"href":478,"rel":479},"https://elysiajs.com/",[473],"Elysia"," under the base URL.",[453,483,484],{},[199,485,486,487,490],{},"\nBase prefix will be removed from ",[215,488,489],{},"request.url"," passed to the mounted app.",[239,492,494],{"className":241,"code":493,"language":243,"meta":244,"style":244},"import { H3 } from \"h3\";\nimport { Hono } from \"hono\";\nimport { Elysia } from \"elysia\";\n\nconst app = new H3()\n  .mount(\n    \"/elysia\",\n    new Elysia().get(\"/test\", () => \"Hello Elysia!\"),\n  )\n  .mount(\n    \"/hono\",\n    new Hono().get(\"/test\", (c) => c.text(\"Hello Hono!\")),\n  );\n",[215,495,496,509,523,537,541,555,564,572,600,605,613,620,658],{"__ignoreMap":244},[248,497,498,500,503,505,507],{"class":250,"line":251},[248,499,255],{"class":254},[248,501,502],{"class":258}," { H3 } ",[248,504,262],{"class":254},[248,506,266],{"class":265},[248,508,269],{"class":258},[248,510,511,513,516,518,521],{"class":250,"line":272},[248,512,255],{"class":254},[248,514,515],{"class":258}," { Hono } ",[248,517,262],{"class":254},[248,519,520],{"class":265}," \"hono\"",[248,522,269],{"class":258},[248,524,525,527,530,532,535],{"class":250,"line":279},[248,526,255],{"class":254},[248,528,529],{"class":258}," { Elysia } ",[248,531,262],{"class":254},[248,533,534],{"class":265}," \"elysia\"",[248,536,269],{"class":258},[248,538,539],{"class":250,"line":302},[248,540,276],{"emptyLinePlaceholder":275},[248,542,543,545,547,549,551,553],{"class":250,"line":327},[248,544,282],{"class":254},[248,546,410],{"class":285},[248,548,289],{"class":254},[248,550,292],{"class":254},[248,552,296],{"class":295},[248,554,299],{"class":258},[248,556,557,559,561],{"class":250,"line":351},[248,558,305],{"class":258},[248,560,422],{"class":295},[248,562,563],{"class":258},"(\n",[248,565,566,569],{"class":250,"line":357},[248,567,568],{"class":265},"    \"/elysia\"",[248,570,571],{"class":258},",\n",[248,573,574,577,580,582,584,586,589,592,594,597],{"class":250,"line":382},[248,575,576],{"class":254},"    new",[248,578,579],{"class":295}," Elysia",[248,581,419],{"class":258},[248,583,362],{"class":295},[248,585,336],{"class":258},[248,587,588],{"class":265},"\"/test\"",[248,590,591],{"class":258},", () ",[248,593,321],{"class":254},[248,595,596],{"class":265}," \"Hello Elysia!\"",[248,598,599],{"class":258},"),\n",[248,601,602],{"class":250,"line":388},[248,603,604],{"class":258},"  )\n",[248,606,607,609,611],{"class":250,"line":394},[248,608,305],{"class":258},[248,610,422],{"class":295},[248,612,563],{"class":258},[248,614,615,618],{"class":250,"line":400},[248,616,617],{"class":265},"    \"/hono\"",[248,619,571],{"class":258},[248,621,622,624,627,629,631,633,635,637,640,642,644,647,650,652,655],{"class":250,"line":405},[248,623,576],{"class":254},[248,625,626],{"class":295}," Hono",[248,628,419],{"class":258},[248,630,362],{"class":295},[248,632,336],{"class":258},[248,634,588],{"class":265},[248,636,370],{"class":258},[248,638,639],{"class":314},"c",[248,641,318],{"class":258},[248,643,321],{"class":254},[248,645,646],{"class":258}," c.",[248,648,649],{"class":295},"text",[248,651,336],{"class":258},[248,653,654],{"class":265},"\"Hello Hono!\"",[248,656,657],{"class":258},")),\n",[248,659,661],{"class":250,"line":660},13,[248,662,663],{"class":258},"  );\n",[665,666,667],"tip",{},[199,668,669,670,475,674,678],{},"\nSimilarly, you can mount an H3 app in ",[203,671,474],{"href":672,"rel":673},"https://hono.dev/docs/api/hono#mount",[473],[203,675,480],{"href":676,"rel":677},"https://elysiajs.com/patterns/mount#mount-1",[473],".",[680,681,682],"style",{},"html pre.shiki code .so5gQ, html code.shiki .so5gQ{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .slsVL, html code.shiki .slsVL{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .sfrk1, html code.shiki .sfrk1{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html pre.shiki code .suiK_, html code.shiki .suiK_{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html pre.shiki code .shcOC, html code.shiki .shcOC{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .sQHwn, html code.shiki .sQHwn{--shiki-light:#E36209;--shiki-default:#FFAB70;--shiki-dark:#FFAB70}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);}",{"title":244,"searchDepth":272,"depth":272,"links":684},[685,686],{"id":228,"depth":272,"text":229},{"id":460,"depth":272,"text":461},"H3 has a native mount method for adding nested sub-apps to the main instance.","md",{"icon":51},{"icon":51},{"title":48,"description":687},"XNDhq4Yy0h3EcvXh2rIrMV5uClbMuz_3eWE8pTJcpHU",[694,696],{"title":43,"path":44,"stem":45,"description":695,"icon":46,"children":-1},"Send errors by throwing an HTTPError.",{"title":60,"path":61,"stem":62,"description":697,"icon":63,"children":-1},"H3 class is the core of server.",1783690731147]