mirror of
https://github.com/nuxt/nuxt.git
synced 2025-02-23 17:10:07 +00:00
35 lines
1.1 KiB
Markdown
35 lines
1.1 KiB
Markdown
|
---
|
||
|
description: Using server directory to create middlewares, plugins and API easily.
|
||
|
---
|
||
|
|
||
|
# Server Directory
|
||
|
|
||
|
Nuxt scans files and create middlewares, plugins and API routes to create features to use inside components or pages.
|
||
|
|
||
|
Each file under these folders must return a function defined with `defineEventHandler()`.
|
||
|
|
||
|
## Server Routes
|
||
|
|
||
|
Anything under `~/server/api` folder will create API routes to fetch data within API route.
|
||
|
|
||
|
```ts [server/api/hello.ts]
|
||
|
export default defineEventHandler(() => {
|
||
|
return {
|
||
|
greetings: 'traveler'
|
||
|
}
|
||
|
})
|
||
|
```
|
||
|
|
||
|
```vue [components/Greet.vue]
|
||
|
<script setup lang="ts">
|
||
|
const {data} = await useFetch('/api/hello')
|
||
|
</script>
|
||
|
```
|
||
|
|
||
|
This server route will return a data object that contains an object with content of `{greetings: 'traveler'}`.
|
||
|
|
||
|
Server route file will automatically match with `GET` method and it can be changed by adding method names to file name such as: `.post`, `.put`, `.delete`.
|
||
|
Routes may accept parameters, body and query parameters to get some values.
|
||
|
|
||
|
:ReadMore{link="/docs/guide/directory-structure/server#matching-route-parameters"}
|