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