mirror of
https://github.com/nuxt/nuxt.git
synced 2025-02-24 01:19:58 +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"}
|