[{"data":1,"prerenderedAt":400},["Reactive",2],{"$KyeTl6nybl":3,"page-data":4,"page-tree":369,"doc-page-nav":389,"doc-linker-to-BaseInput":394,"doc-linker-to-BaseCard":396,"doc-linker-to-BaseParagraph":398},[],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":8,"body":10,"_type":364,"_id":365,"_source":366,"_file":367,"_extension":368},"/documentation/setup/first-api-route","setup",false,"","Your first API route",{"type":11,"children":12,"toc":361},"root",[13,272,356],{"type":14,"tag":15,"props":16,"children":18},"element","doc-component-demo",{"title":17},"Define your first event handler",[19,46,60,77,84,97,112,133,145,150,195,215,228,232,237],{"type":14,"tag":20,"props":21,"children":22},"p",{},[23,26,35,37,44],{"type":24,"value":25},"text","Nuxt has built-in support to create server endpoints. You can use it to fetch your data from your database, request other API, return static content, think like express.js with super powers, thanks to ",{"type":14,"tag":27,"props":28,"children":32},"a",{"href":29,"rel":30},"https://nitro.unjs.io/",[31],"nofollow",[33],{"type":24,"value":34},"Nitro",{"type":24,"value":36}," and ",{"type":14,"tag":27,"props":38,"children":41},{"href":39,"rel":40},"https://unjs.io/",[31],[42],{"type":24,"value":43},"UnJS",{"type":24,"value":45}," ecosystem.",{"type":14,"tag":20,"props":47,"children":48},{},[49,51,58],{"type":24,"value":50},"This is a basic example of directory structure for your ",{"type":14,"tag":52,"props":53,"children":55},"code",{"className":54},[],[56],{"type":24,"value":57},"\u003Capp>/server/",{"type":24,"value":59}," directory:",{"type":14,"tag":61,"props":62,"children":63},"code-group",{},[64],{"type":14,"tag":65,"props":66,"children":72},"pre",{"className":67,"code":69,"filename":70,"language":71,"meta":8},[68],"language-bash","├── \u003Capp>/\n│   ├── server/\n│   │   ├── api/\n│   │   │   └── hello.ts # /api/hello\n│   │   ├── routes/\n│   │   │   └── sitemap.xml.ts # /sitemap.xml\n│   │   ├── plugins/ # nitro plugins\n│   │   ├── tasks/ # nitro tasks\n│   │   ├── middleware/ # nitro middlewares\n│   │   └── utils/ # server only utils\n","Terminal","bash",[73],{"type":14,"tag":52,"props":74,"children":75},{"__ignoreMap":8},[76],{"type":24,"value":69},{"type":14,"tag":78,"props":79,"children":83},"doc-heading",{"className":80,"label":82},[81],"mb-4","Hello world route",[],{"type":14,"tag":20,"props":85,"children":86},{},[87,89,95],{"type":24,"value":88},"We will create a ",{"type":14,"tag":52,"props":90,"children":92},{"className":91},[],[93],{"type":24,"value":94},"/api/hello",{"type":24,"value":96}," route that will return a greeting message.",{"type":14,"tag":61,"props":98,"children":99},{},[100],{"type":14,"tag":65,"props":101,"children":107},{"className":102,"code":104,"filename":105,"language":106,"meta":8},[103],"language-ts","export default defineEventHandler((event) => {\n  // extract the \"from\" query parameter\n  const from = getQuery(event)?.from || 'tairo'\n\n  return `درود از طرف ${from}!`\n})\n","\u003Capp>/server/api/hello.ts","ts",[108],{"type":14,"tag":52,"props":109,"children":110},{"__ignoreMap":8},[111],{"type":24,"value":104},{"type":14,"tag":20,"props":113,"children":114},{},[115,117,123,125,131],{"type":24,"value":116},"You can test your API route by visiting ",{"type":14,"tag":52,"props":118,"children":120},{"className":119},[],[121],{"type":24,"value":122},"http://localhost:3000/api/hello?from=world",{"type":24,"value":124}," in your browser or by using ",{"type":14,"tag":52,"props":126,"children":128},{"className":127},[],[129],{"type":24,"value":130},"curl",{"type":24,"value":132},":",{"type":14,"tag":61,"props":134,"children":135},{},[136],{"type":14,"tag":65,"props":137,"children":140},{"className":138,"code":139,"filename":70,"language":71,"meta":8},[68],"curl -i http://localhost:3000/api/hello?from=world\n# Access-Control-Allow-Origin: *\n# content-type: text/html\n# date: Wed, 19 Apr 2023 18:03:31 GMT\n# connection: close\n# content-length: 12\n#\n# Hello world!\n",[141],{"type":14,"tag":52,"props":142,"children":143},{"__ignoreMap":8},[144],{"type":24,"value":139},{"type":14,"tag":78,"props":146,"children":149},{"className":147,"label":148},[81],"Dynamic routes",[],{"type":14,"tag":20,"props":151,"children":152},{},[153,155,161,163,169,171,177,179,185,187,193],{"type":24,"value":154},"You can also define dynamic routes by using the ",{"type":14,"tag":52,"props":156,"children":158},{"className":157},[],[159],{"type":24,"value":160},"[paramName]",{"type":24,"value":162}," syntax in either files or directories. For example, if you want to create a route that will have a dynamic ",{"type":14,"tag":52,"props":164,"children":166},{"className":165},[],[167],{"type":24,"value":168},"id",{"type":24,"value":170}," parameter, you can create a file named ",{"type":14,"tag":52,"props":172,"children":174},{"className":173},[],[175],{"type":24,"value":176},"\u003Capp>/server/api/product/[id].ts",{"type":24,"value":178}," or a directory named ",{"type":14,"tag":52,"props":180,"children":182},{"className":181},[],[183],{"type":24,"value":184},"[id]",{"type":24,"value":186}," like ",{"type":14,"tag":52,"props":188,"children":190},{"className":189},[],[191],{"type":24,"value":192},"\u003Capp>/server/api/product/[id]/index.ts",{"type":24,"value":194},".",{"type":14,"tag":20,"props":196,"children":197},{},[198,200,206,208,214],{"type":24,"value":199},"In addition to parameters, you can add suffixes to your dynamic routes. For example, you can create a route that will only accept ",{"type":14,"tag":52,"props":201,"children":203},{"className":202},[],[204],{"type":24,"value":205},"POST",{"type":24,"value":207}," requests by creating a file ending with ",{"type":14,"tag":52,"props":209,"children":211},{"className":210},[],[212],{"type":24,"value":213},".post.ts",{"type":24,"value":194},{"type":14,"tag":61,"props":216,"children":217},{},[218],{"type":14,"tag":65,"props":219,"children":223},{"className":220,"code":221,"filename":222,"language":106,"meta":8},[103],"export default defineEventHandler(await (event) => {\n  // get the id parameters from the context\n  const id = getRouterParam(event, 'id')\n\n  // read and parse the request body\n  const body = await readBody(event)\n\n  // add the product to the cart (this is just an example)\n  const cartItem = await addToCart(id, body.quantity)\n\n  // perform other actions ...\n\n  // returning an object will automatically set \n  // the content-type: application/json header\n  return cartItem\n})\n","\u003Capp>/server/api/add-to-cart/(id).post.ts",[224],{"type":14,"tag":52,"props":225,"children":226},{"__ignoreMap":8},[227],{"type":24,"value":221},{"type":14,"tag":229,"props":230,"children":231},"hr",{},[],{"type":14,"tag":20,"props":233,"children":234},{},[235],{"type":24,"value":236},"Useful resources:",{"type":14,"tag":238,"props":239,"children":240},"ul",{},[241,252,262],{"type":14,"tag":242,"props":243,"children":244},"li",{},[245],{"type":14,"tag":27,"props":246,"children":249},{"href":247,"rel":248},"https://nuxt.com/docs/getting-started/server",[31],[250],{"type":24,"value":251},"Learn about server directory on nuxt.com",{"type":14,"tag":242,"props":253,"children":254},{},[255],{"type":14,"tag":27,"props":256,"children":259},{"href":257,"rel":258},"https://nitro.unjs.io/guide/routing",[31],[260],{"type":24,"value":261},"Learn about API Routes on nitro.unjs.io",{"type":14,"tag":242,"props":263,"children":264},{},[265],{"type":14,"tag":27,"props":266,"children":269},{"href":267,"rel":268},"https://github.com/unjs/h3#utilities",[31],[270],{"type":24,"value":271},"Discover h3 server utils on github.com",{"type":14,"tag":15,"props":273,"children":276},{"title":274,":code":275},"Connect your data","false",[277,290,305,336,339,343],{"type":14,"tag":20,"props":278,"children":279},{},[280,282,288],{"type":24,"value":281},"Now that you have a page and an API route, you can connect them together. We will request the hello API route from the page created ",{"type":14,"tag":27,"props":283,"children":285},{"href":284},"/documentation/setup/first-page",[286],{"type":24,"value":287},"in the previous section",{"type":24,"value":289}," and display the result.",{"type":14,"tag":61,"props":291,"children":292},{},[293],{"type":14,"tag":65,"props":294,"children":300},{"className":295,"code":297,"filename":298,"language":299,"meta":8},[296],"language-vue","\u003Cscript setup lang=\"ts\">\n// definePageMeta ...\n\n// create a reactive input value\nconst input = ref('')\n\n// create a computed object that will be updated\n// every time the input value changes\nconst query = computed(() => ({ from: input.value }))\n\n// call our API route, it will be re-fetched\n// every time the query object changes\n// note that data type is detected automatically!\nconst { data } = useFetch('/api/hello', {\n  query,\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"max-w-lg\">\n    \u003CBaseCard class=\"p-6\">\n      \u003C!-- reactive input -->\n      \u003CBaseInput \n        label=\"Your name\" \n        v-model=\"input\"\n      />\n\n      \u003C!-- display the result -->\n      \u003CBaseParagraph class=\"mt-4 line-clamp-1 max-w-sm\">\n        {{ data }}\n      \u003C/BaseParagraph>\n    \u003C/BaseCard>\n  \u003C/div>\n\u003C/template>\n","\u003Capp>/pages/index.vue","vue",[301],{"type":14,"tag":52,"props":302,"children":303},{"__ignoreMap":8},[304],{"type":24,"value":297},{"type":14,"tag":20,"props":306,"children":307},{},[308,310,315,317,321,322,326,328,334],{"type":24,"value":309},"We've seen that using the ",{"type":14,"tag":311,"props":312,"children":314},"doc-linker",{"to":313},"BaseInput",[],{"type":24,"value":316},", ",{"type":14,"tag":311,"props":318,"children":320},{"to":319},"BaseCard",[],{"type":24,"value":36},{"type":14,"tag":311,"props":323,"children":325},{"to":324},"BaseParagraph",[],{"type":24,"value":327}," components was very easy. You may also want to take a look at how we do ",{"type":14,"tag":27,"props":329,"children":331},{"href":330},"/documentation/guides/form-validation",[332],{"type":24,"value":333},"form validation",{"type":24,"value":335}," and explore form pages from the demo to learn more about how to build forms with Tairo.",{"type":14,"tag":229,"props":337,"children":338},{},[],{"type":14,"tag":20,"props":340,"children":341},{},[342],{"type":24,"value":236},{"type":14,"tag":238,"props":344,"children":345},{},[346],{"type":14,"tag":242,"props":347,"children":348},{},[349],{"type":14,"tag":27,"props":350,"children":353},{"href":351,"rel":352},"https://nuxt.com/docs/getting-started/data-fetching",[31],[354],{"type":24,"value":355},"Read data fetching guide on nuxt.com",{"type":14,"tag":357,"props":358,"children":360},"doc-nav",{"next":359,"prev":284},"/documentation/setup/configuration",[],{"title":8,"searchDepth":362,"depth":362,"links":363},2,[],"markdown","content:documentation:10.setup:6.first-api-route.md","content","documentation/10.setup/6.first-api-route.md","md",[370,376,383],{"_path":371,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"title":372,"description":8,"toc":373,"_type":364,"_id":374,"_source":366,"_file":375,"_extension":368},"/documentation","مرکز مستندات",true,"content:documentation:1.index.md","documentation/1.index.md",{"_path":377,"_dir":6,"_draft":7,"_partial":373,"_locale":8,"title":378,"_id":379,"_type":380,"_source":366,"_file":381,"_extension":382},"/documentation/setup/_dir","Setup","content:documentation:10.setup:_dir.yml","yaml","documentation/10.setup/_dir.yml","yml",{"_path":384,"_dir":385,"_draft":7,"_partial":7,"_locale":8,"title":386,"description":8,"_type":364,"_id":387,"_source":366,"_file":388,"_extension":368},"/documentation/setup","documentation","Prerequisites","content:documentation:10.setup:1.index.md","documentation/10.setup/1.index.md",[390,392],{"_path":284,"title":391},"Your first page",{"_path":359,"title":393},"Configuration",{"_path":395},"/documentation/reference/forms/input",{"_path":397},"/documentation/reference/base/card",{"_path":399},"/documentation/reference/base/typography",1779173532863]