[{"data":1,"prerenderedAt":859},["ShallowReactive",2],{"navigation":3,"-guide-basics-routing":184,"-guide-basics-routing-surround":854},[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},"H3 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 guide for v1 to v2","/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,"page":-1},"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":23,"body":186,"description":848,"extension":849,"meta":850,"navigation":851,"path":24,"seo":852,"stem":25,"__hash__":853},"content/1.guide/1.basics/2.routing.md",{"type":187,"value":188,"toc":842,"icon":26},"minimark",[189,194,229,242,257,345,348,422,430,478,482,489,558,569,598,602,624,670,683,692,696,699,827,838],[190,191,193],"h2",{"id":192},"adding-routes","Adding Routes",[195,196,197,198,202,203,206,207,214,215,221,222,228],"p",{},"You can register route ",[199,200,201],"a",{"href":34},"handlers"," to ",[199,204,205],{"href":61},"H3 instance"," using ",[199,208,210],{"href":209},"/guide/api/h3#h3on",[211,212,213],"code",{},"H3.on",", ",[199,216,218],{"href":217},"/guide/api/h3#h3method",[211,219,220],{},"H3.[method]",", or ",[199,223,225],{"href":224},"/guide/api/h3#h3all",[211,226,227],{},"H3.all",".",[230,231,232],"tip",{},[195,233,234,235,241],{},"\nRouter is powered by ",[199,236,240],{"href":237,"rel":238},"https://github.com/h3js/rou3",[239],"nofollow","🌳 Rou3",", an ultra-fast and tiny route matcher engine.",[195,243,244,248,249,252,253,256],{},[245,246,247],"strong",{},"Example:"," Register a route to match requests to the ",[211,250,251],{},"/hello"," endpoint with HTTP ",[245,254,255],{},"GET"," method.",[258,259,260,310],"ul",{},[261,262,263,264,268],"li",{},"Using ",[199,265,266],{"href":217},[211,267,220],{},[269,270,275],"pre",{"className":271,"code":272,"language":273,"meta":274,"style":274},"language-js shiki shiki-themes github-light github-dark github-dark","app.get(\"/hello\", () => \"Hello world!\");\n","js","",[211,276,277],{"__ignoreMap":274},[278,279,282,286,290,293,297,300,304,307],"span",{"class":280,"line":281},"line",1,[278,283,285],{"class":284},"slsVL","app.",[278,287,289],{"class":288},"shcOC","get",[278,291,292],{"class":284},"(",[278,294,296],{"class":295},"sfrk1","\"/hello\"",[278,298,299],{"class":284},", () ",[278,301,303],{"class":302},"so5gQ","=>",[278,305,306],{"class":295}," \"Hello world!\"",[278,308,309],{"class":284},");\n",[261,311,263,312,316],{},[199,313,314],{"href":209},[211,315,213],{},[269,317,319],{"className":271,"code":318,"language":273,"meta":274,"style":274},"app.on(\"GET\", \"/hello\", () => \"Hello world!\");\n",[211,320,321],{"__ignoreMap":274},[278,322,323,325,328,330,333,335,337,339,341,343],{"class":280,"line":281},[278,324,285],{"class":284},[278,326,327],{"class":288},"on",[278,329,292],{"class":284},[278,331,332],{"class":295},"\"GET\"",[278,334,214],{"class":284},[278,336,296],{"class":295},[278,338,299],{"class":284},[278,340,303],{"class":302},[278,342,306],{"class":295},[278,344,309],{"class":284},[195,346,347],{},"You can register multiple event handlers for the same route with different methods:",[269,349,351],{"className":271,"code":350,"language":273,"meta":274,"style":274},"app\n  .get(\"/hello\", () => \"GET Hello world!\")\n  .post(\"/hello\", () => \"POST Hello world!\")\n  .any(\"/hello\", () => \"Any other method!\");\n",[211,352,353,358,380,401],{"__ignoreMap":274},[278,354,355],{"class":280,"line":281},[278,356,357],{"class":284},"app\n",[278,359,361,364,366,368,370,372,374,377],{"class":280,"line":360},2,[278,362,363],{"class":284},"  .",[278,365,289],{"class":288},[278,367,292],{"class":284},[278,369,296],{"class":295},[278,371,299],{"class":284},[278,373,303],{"class":302},[278,375,376],{"class":295}," \"GET Hello world!\"",[278,378,379],{"class":284},")\n",[278,381,383,385,388,390,392,394,396,399],{"class":280,"line":382},3,[278,384,363],{"class":284},[278,386,387],{"class":288},"post",[278,389,292],{"class":284},[278,391,296],{"class":295},[278,393,299],{"class":284},[278,395,303],{"class":302},[278,397,398],{"class":295}," \"POST Hello world!\"",[278,400,379],{"class":284},[278,402,404,406,409,411,413,415,417,420],{"class":280,"line":403},4,[278,405,363],{"class":284},[278,407,408],{"class":288},"any",[278,410,292],{"class":284},[278,412,296],{"class":295},[278,414,299],{"class":284},[278,416,303],{"class":302},[278,418,419],{"class":295}," \"Any other method!\"",[278,421,309],{"class":284},[195,423,424,425,429],{},"You can also use ",[199,426,427],{"href":224},[211,428,227],{}," method to register a route accepting any HTTP method:",[269,431,433],{"className":271,"code":432,"language":273,"meta":274,"style":274},"app.all(\"/hello\", (event) => `This is a ${event.req.method} request!`);\n",[211,434,435],{"__ignoreMap":274},[278,436,437,439,442,444,446,449,453,456,458,461,463,465,468,470,473,476],{"class":280,"line":281},[278,438,285],{"class":284},[278,440,441],{"class":288},"all",[278,443,292],{"class":284},[278,445,296],{"class":295},[278,447,448],{"class":284},", (",[278,450,452],{"class":451},"sQHwn","event",[278,454,455],{"class":284},") ",[278,457,303],{"class":302},[278,459,460],{"class":295}," `This is a ${",[278,462,452],{"class":284},[278,464,228],{"class":295},[278,466,467],{"class":284},"req",[278,469,228],{"class":295},[278,471,472],{"class":284},"method",[278,474,475],{"class":295},"} request!`",[278,477,309],{"class":284},[190,479,481],{"id":480},"dynamic-routes","Dynamic Routes",[195,483,484,485,488],{},"You can define dynamic route parameters using ",[211,486,487],{},":"," prefix:",[269,490,492],{"className":271,"code":491,"language":273,"meta":274,"style":274},"// [GET] /hello/Bob => \"Hello, Bob!\"\napp.get(\"/hello/:name\", (event) => {\n  return `Hello, ${event.context.params.name}!`;\n});\n",[211,493,494,500,522,553],{"__ignoreMap":274},[278,495,496],{"class":280,"line":281},[278,497,499],{"class":498},"sCsY4","// [GET] /hello/Bob => \"Hello, Bob!\"\n",[278,501,502,504,506,508,511,513,515,517,519],{"class":280,"line":360},[278,503,285],{"class":284},[278,505,289],{"class":288},[278,507,292],{"class":284},[278,509,510],{"class":295},"\"/hello/:name\"",[278,512,448],{"class":284},[278,514,452],{"class":451},[278,516,455],{"class":284},[278,518,303],{"class":302},[278,520,521],{"class":284}," {\n",[278,523,524,527,530,532,534,537,539,542,544,547,550],{"class":280,"line":382},[278,525,526],{"class":302},"  return",[278,528,529],{"class":295}," `Hello, ${",[278,531,452],{"class":284},[278,533,228],{"class":295},[278,535,536],{"class":284},"context",[278,538,228],{"class":295},[278,540,541],{"class":284},"params",[278,543,228],{"class":295},[278,545,546],{"class":284},"name",[278,548,549],{"class":295},"}!`",[278,551,552],{"class":284},";\n",[278,554,555],{"class":280,"line":403},[278,556,557],{"class":284},"});\n",[195,559,560,561,564,565,568],{},"Instead of named parameters, you can use ",[211,562,563],{},"*"," for unnamed ",[245,566,567],{},"optional"," parameters:",[269,570,572],{"className":271,"code":571,"language":273,"meta":274,"style":274},"app.get(\"/hello/*\", (event) => `Hello!`);\n",[211,573,574],{"__ignoreMap":274},[278,575,576,578,580,582,585,587,589,591,593,596],{"class":280,"line":281},[278,577,285],{"class":284},[278,579,289],{"class":288},[278,581,292],{"class":284},[278,583,584],{"class":295},"\"/hello/*\"",[278,586,448],{"class":284},[278,588,452],{"class":451},[278,590,455],{"class":284},[278,592,303],{"class":302},[278,594,595],{"class":295}," `Hello!`",[278,597,309],{"class":284},[190,599,601],{"id":600},"wildcard-routes","Wildcard Routes",[195,603,604,605,608,609,612,613,616,617,620,621,488],{},"Adding ",[211,606,607],{},"/hello/:name"," route will match ",[211,610,611],{},"/hello/world"," or ",[211,614,615],{},"/hello/123",". But it will not match ",[211,618,619],{},"/hello/foo/bar",".\nWhen you need to match multiple levels of sub routes, you can use ",[211,622,623],{},"**",[269,625,627],{"className":271,"code":626,"language":273,"meta":274,"style":274},"app.get(\"/hello/**\", (event) => `Hello ${event.context.params._}!`);\n",[211,628,629],{"__ignoreMap":274},[278,630,631,633,635,637,640,642,644,646,648,651,653,655,657,659,661,663,666,668],{"class":280,"line":281},[278,632,285],{"class":284},[278,634,289],{"class":288},[278,636,292],{"class":284},[278,638,639],{"class":295},"\"/hello/**\"",[278,641,448],{"class":284},[278,643,452],{"class":451},[278,645,455],{"class":284},[278,647,303],{"class":302},[278,649,650],{"class":295}," `Hello ${",[278,652,452],{"class":284},[278,654,228],{"class":295},[278,656,536],{"class":284},[278,658,228],{"class":295},[278,660,541],{"class":284},[278,662,228],{"class":295},[278,664,665],{"class":284},"_",[278,667,549],{"class":295},[278,669,309],{"class":284},[195,671,672,673,214,675,214,677,214,679,682],{},"This will match ",[211,674,251],{},[211,676,611],{},[211,678,615],{},[211,680,681],{},"/hello/world/123",", etc.",[684,685,686],"note",{},[195,687,688,689,691],{},"\nParam ",[211,690,665],{}," will store the full wildcard content as a single string.",[190,693,695],{"id":694},"route-meta","Route Meta",[195,697,698],{},"You can define optional route meta when registering them, accessible from any middleware.",[269,700,702],{"className":271,"code":701,"language":273,"meta":274,"style":274},"import { H3 } from \"h3\";\n\nconst app = new H3();\n\napp.use((event) => {\n  console.log(event.context.matchedRoute?.meta); // { auth: true }\n});\n\napp.get(\"/\", (event) => \"Hi!\", { meta: { auth: true } });\n",[211,703,704,720,726,747,751,770,785,790,795],{"__ignoreMap":274},[278,705,706,709,712,715,718],{"class":280,"line":281},[278,707,708],{"class":302},"import",[278,710,711],{"class":284}," { H3 } ",[278,713,714],{"class":302},"from",[278,716,717],{"class":295}," \"h3\"",[278,719,552],{"class":284},[278,721,722],{"class":280,"line":360},[278,723,725],{"emptyLinePlaceholder":724},true,"\n",[278,727,728,731,735,738,741,744],{"class":280,"line":382},[278,729,730],{"class":302},"const",[278,732,734],{"class":733},"suiK_"," app",[278,736,737],{"class":302}," =",[278,739,740],{"class":302}," new",[278,742,743],{"class":288}," H3",[278,745,746],{"class":284},"();\n",[278,748,749],{"class":280,"line":403},[278,750,725],{"emptyLinePlaceholder":724},[278,752,754,756,759,762,764,766,768],{"class":280,"line":753},5,[278,755,285],{"class":284},[278,757,758],{"class":288},"use",[278,760,761],{"class":284},"((",[278,763,452],{"class":451},[278,765,455],{"class":284},[278,767,303],{"class":302},[278,769,521],{"class":284},[278,771,773,776,779,782],{"class":280,"line":772},6,[278,774,775],{"class":284},"  console.",[278,777,778],{"class":288},"log",[278,780,781],{"class":284},"(event.context.matchedRoute?.meta); ",[278,783,784],{"class":498},"// { auth: true }\n",[278,786,788],{"class":280,"line":787},7,[278,789,557],{"class":284},[278,791,793],{"class":280,"line":792},8,[278,794,725],{"emptyLinePlaceholder":724},[278,796,798,800,802,804,807,809,811,813,815,818,821,824],{"class":280,"line":797},9,[278,799,285],{"class":284},[278,801,289],{"class":288},[278,803,292],{"class":284},[278,805,806],{"class":295},"\"/\"",[278,808,448],{"class":284},[278,810,452],{"class":451},[278,812,455],{"class":284},[278,814,303],{"class":302},[278,816,817],{"class":295}," \"Hi!\"",[278,819,820],{"class":284},", { meta: { auth: ",[278,822,823],{"class":733},"true",[278,825,826],{"class":284}," } });\n",[828,829,831],"read-more",{"to":830},"/guide/basics/handler#meta",[195,832,833,834,837],{},"It is also possible to add route meta when defining them using ",[211,835,836],{},"defineHandler"," object syntax.",[839,840,841],"style",{},"html pre.shiki code .slsVL, html code.shiki .slsVL{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .shcOC, html code.shiki .shcOC{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .sfrk1, html code.shiki .sfrk1{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html pre.shiki code .so5gQ, html code.shiki .so5gQ{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#F97583}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 .sQHwn, html code.shiki .sQHwn{--shiki-light:#E36209;--shiki-default:#FFAB70;--shiki-dark:#FFAB70}html pre.shiki code .sCsY4, html code.shiki .sCsY4{--shiki-light:#6A737D;--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .suiK_, html code.shiki .suiK_{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#79B8FF}",{"title":274,"searchDepth":360,"depth":360,"links":843},[844,845,846,847],{"id":192,"depth":360,"text":193},{"id":480,"depth":360,"text":481},{"id":600,"depth":360,"text":601},{"id":694,"depth":360,"text":695},"Each request is matched to one (most specific) route handler.","md",{"icon":26},{"icon":26},{"title":23,"description":848},"vKQhsoc0xJLli2SwQWEQtFgzx47NWsAYFcxGGcOqdqw",[855,857],{"title":18,"path":19,"stem":20,"description":856,"icon":21,"children":-1},"H3 dispatches incoming web requests to final web responses.",{"title":28,"path":29,"stem":30,"description":858,"icon":31,"children":-1},"Intercept request, response and errors using H3 middleware.",1753878201605]