[{"data":1,"prerenderedAt":694},["ShallowReactive",2],{"navigation":3,"-guide-basics-nested-apps":189,"-guide-basics-nested-apps-surround":689},[4,91,138,166,173],{"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],{"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},"Sessions","/examples/handle-session","4.examples/handle-session",{"title":155,"path":156,"stem":157,"icon":149},"Static Assets","/examples/serve-static-assets","4.examples/serve-static-assets",{"title":159,"path":160,"stem":161,"icon":149},"Stream Response","/examples/stream-response","4.examples/stream-response",{"title":163,"path":164,"stem":165,"icon":149},"Validate Data","/examples/validate-data","4.examples/validate-data",{"title":167,"path":168,"stem":169,"children":170,"icon":172},"Migration","/migration","5.migration/0.index",[171],{"title":167,"path":168,"stem":169,"icon":172},"icons8:up-round",{"title":174,"path":175,"stem":176,"children":177},"Blog","/blog","99.blog",[178,181,185],{"title":174,"path":175,"stem":179,"icon":180},"99.blog/index","i-lucide-file-text",{"title":182,"path":183,"stem":184,"icon":180},"H3 1.8 - Towards the Edge of the Web","/blog/v1.8","99.blog/1.v1.8",{"title":186,"path":187,"stem":188,"icon":180},"H3 v2 beta","/blog/v2-beta","99.blog/2.v2-beta",{"id":190,"title":48,"body":191,"description":683,"extension":684,"meta":685,"navigation":686,"path":49,"seo":687,"stem":50,"__hash__":688},"content/1.guide/1.basics/7.nested-apps.md",{"type":192,"value":193,"toc":679,"icon":51},"minimark",[194,207,221,226,234,427,448,454,458,478,487,660,675],[195,196,197,198,201,202,206],"p",{},"Typically, H3 projects consist of several ",[199,200,33],"a",{"href":34}," defined in one or multiple files (or even ",[199,203,205],{"href":204},"/guide/basics/handler#lazy-handlers","lazy loaded"," for faster startup times).",[195,208,209,210,213,214,220],{},"It is sometimes more convenient to combine multiple ",[211,212,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 ",[199,215,217],{"href":216},"/guide/api/h3#h3mount",[211,218,219],{},".mount"," method to facilitate this.",[222,223,225],"h2",{"id":224},"nested-h3-apps","Nested H3 Apps",[195,227,228,229,233],{},"H3 natively allows mounting sub-apps. When mounted, sub-app routes and middleware are ",[230,231,232],"strong",{},"merged"," with the base url prefix into the main app instance.",[235,236,241],"pre",{"className":237,"code":238,"language":239,"meta":240,"style":240},"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","",[211,242,243,266,273,296,321,345,351,376,382,388,394,399],{"__ignoreMap":240},[244,245,248,252,256,259,263],"span",{"class":246,"line":247},"line",1,[244,249,251],{"class":250},"so5gQ","import",[244,253,255],{"class":254},"slsVL"," { H3, serve } ",[244,257,258],{"class":250},"from",[244,260,262],{"class":261},"sfrk1"," \"h3\"",[244,264,265],{"class":254},";\n",[244,267,269],{"class":246,"line":268},2,[244,270,272],{"emptyLinePlaceholder":271},true,"\n",[244,274,276,279,283,286,289,293],{"class":246,"line":275},3,[244,277,278],{"class":250},"const",[244,280,282],{"class":281},"suiK_"," nestedApp",[244,284,285],{"class":250}," =",[244,287,288],{"class":250}," new",[244,290,292],{"class":291},"shcOC"," H3",[244,294,295],{"class":254},"()\n",[244,297,299,302,305,308,312,315,318],{"class":246,"line":298},4,[244,300,301],{"class":254},"  .",[244,303,304],{"class":291},"use",[244,306,307],{"class":254},"((",[244,309,311],{"class":310},"sQHwn","event",[244,313,314],{"class":254},") ",[244,316,317],{"class":250},"=>",[244,319,320],{"class":254}," {\n",[244,322,324,327,330,333,336,339,342],{"class":246,"line":323},5,[244,325,326],{"class":254},"    event.res.headers.",[244,328,329],{"class":291},"set",[244,331,332],{"class":254},"(",[244,334,335],{"class":261},"\"x-api\"",[244,337,338],{"class":254},", ",[244,340,341],{"class":261},"\"1\"",[244,343,344],{"class":254},");\n",[244,346,348],{"class":246,"line":347},6,[244,349,350],{"class":254},"  })\n",[244,352,354,356,359,361,364,367,369,371,373],{"class":246,"line":353},7,[244,355,301],{"class":254},[244,357,358],{"class":291},"get",[244,360,332],{"class":254},[244,362,363],{"class":261},"\"/**:slug\"",[244,365,366],{"class":254},", (",[244,368,311],{"class":310},[244,370,314],{"class":254},[244,372,317],{"class":250},[244,374,375],{"class":254}," ({\n",[244,377,379],{"class":246,"line":378},8,[244,380,381],{"class":254},"    pathname: event.url.pathname,\n",[244,383,385],{"class":246,"line":384},9,[244,386,387],{"class":254},"    slug: event.context.params?.slug,\n",[244,389,391],{"class":246,"line":390},10,[244,392,393],{"class":254},"  }));\n",[244,395,397],{"class":246,"line":396},11,[244,398,272],{"emptyLinePlaceholder":271},[244,400,402,404,407,409,411,413,416,419,421,424],{"class":246,"line":401},12,[244,403,278],{"class":250},[244,405,406],{"class":281}," app",[244,408,285],{"class":250},[244,410,288],{"class":250},[244,412,292],{"class":291},[244,414,415],{"class":254},"().",[244,417,418],{"class":291},"mount",[244,420,332],{"class":254},[244,422,423],{"class":261},"\"/api\"",[244,425,426],{"class":254},", nestedApp);\n",[195,428,429,430,433,434,437,438,440,441,437,444,447],{},"In the example above, when fetching the ",[211,431,432],{},"/api/test"," URL, ",[211,435,436],{},"pathname"," will be ",[211,439,432],{}," (the real path), and ",[211,442,443],{},"slug",[211,445,446],{},"/test"," (wildcard param).",[449,450,451],"note",{},[195,452,453],{},"\nGlobal config and hooks won't be inherited from the nested app. Consider always setting them from the main app.",[222,455,457],{"id":456},"nested-web-standard-apps","Nested Web Standard Apps",[195,459,460,461,464,465,471,472,477],{},"Mount a ",[211,462,463],{},".fetch"," compatible server instance like ",[199,466,470],{"href":467,"rel":468},"https://hono.dev/",[469],"nofollow","Hono"," or ",[199,473,476],{"href":474,"rel":475},"https://elysiajs.com/",[469],"Elysia"," under the base URL.",[449,479,480],{},[195,481,482,483,486],{},"\nBase prefix will be removed from ",[211,484,485],{},"request.url"," passed to the mounted app.",[235,488,490],{"className":237,"code":489,"language":239,"meta":240,"style":240},"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",[211,491,492,505,519,533,537,551,560,568,596,601,609,616,654],{"__ignoreMap":240},[244,493,494,496,499,501,503],{"class":246,"line":247},[244,495,251],{"class":250},[244,497,498],{"class":254}," { H3 } ",[244,500,258],{"class":250},[244,502,262],{"class":261},[244,504,265],{"class":254},[244,506,507,509,512,514,517],{"class":246,"line":268},[244,508,251],{"class":250},[244,510,511],{"class":254}," { Hono } ",[244,513,258],{"class":250},[244,515,516],{"class":261}," \"hono\"",[244,518,265],{"class":254},[244,520,521,523,526,528,531],{"class":246,"line":275},[244,522,251],{"class":250},[244,524,525],{"class":254}," { Elysia } ",[244,527,258],{"class":250},[244,529,530],{"class":261}," \"elysia\"",[244,532,265],{"class":254},[244,534,535],{"class":246,"line":298},[244,536,272],{"emptyLinePlaceholder":271},[244,538,539,541,543,545,547,549],{"class":246,"line":323},[244,540,278],{"class":250},[244,542,406],{"class":281},[244,544,285],{"class":250},[244,546,288],{"class":250},[244,548,292],{"class":291},[244,550,295],{"class":254},[244,552,553,555,557],{"class":246,"line":347},[244,554,301],{"class":254},[244,556,418],{"class":291},[244,558,559],{"class":254},"(\n",[244,561,562,565],{"class":246,"line":353},[244,563,564],{"class":261},"    \"/elysia\"",[244,566,567],{"class":254},",\n",[244,569,570,573,576,578,580,582,585,588,590,593],{"class":246,"line":378},[244,571,572],{"class":250},"    new",[244,574,575],{"class":291}," Elysia",[244,577,415],{"class":254},[244,579,358],{"class":291},[244,581,332],{"class":254},[244,583,584],{"class":261},"\"/test\"",[244,586,587],{"class":254},", () ",[244,589,317],{"class":250},[244,591,592],{"class":261}," \"Hello Elysia!\"",[244,594,595],{"class":254},"),\n",[244,597,598],{"class":246,"line":384},[244,599,600],{"class":254},"  )\n",[244,602,603,605,607],{"class":246,"line":390},[244,604,301],{"class":254},[244,606,418],{"class":291},[244,608,559],{"class":254},[244,610,611,614],{"class":246,"line":396},[244,612,613],{"class":261},"    \"/hono\"",[244,615,567],{"class":254},[244,617,618,620,623,625,627,629,631,633,636,638,640,643,646,648,651],{"class":246,"line":401},[244,619,572],{"class":250},[244,621,622],{"class":291}," Hono",[244,624,415],{"class":254},[244,626,358],{"class":291},[244,628,332],{"class":254},[244,630,584],{"class":261},[244,632,366],{"class":254},[244,634,635],{"class":310},"c",[244,637,314],{"class":254},[244,639,317],{"class":250},[244,641,642],{"class":254}," c.",[244,644,645],{"class":291},"text",[244,647,332],{"class":254},[244,649,650],{"class":261},"\"Hello Hono!\"",[244,652,653],{"class":254},")),\n",[244,655,657],{"class":246,"line":656},13,[244,658,659],{"class":254},"  );\n",[661,662,663],"tip",{},[195,664,665,666,471,670,674],{},"\nSimilarly, you can mount an H3 app in ",[199,667,470],{"href":668,"rel":669},"https://hono.dev/docs/api/hono#mount",[469],[199,671,476],{"href":672,"rel":673},"https://elysiajs.com/patterns/mount#mount-1",[469],".",[676,677,678],"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":240,"searchDepth":268,"depth":268,"links":680},[681,682],{"id":224,"depth":268,"text":225},{"id":456,"depth":268,"text":457},"H3 has a native mount method for adding nested sub-apps to the main instance.","md",{"icon":51},{"icon":51},{"title":48,"description":683},"XNDhq4Yy0h3EcvXh2rIrMV5uClbMuz_3eWE8pTJcpHU",[690,692],{"title":43,"path":44,"stem":45,"description":691,"icon":46,"children":-1},"Send errors by throwing an HTTPError.",{"title":60,"path":61,"stem":62,"description":693,"icon":63,"children":-1},"H3 class is the core of server.",1773004785062]