Skip to content

Commit

Permalink
docs: server directory improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
Atinux committed May 16, 2023
1 parent a0583ba commit d53cc60
Showing 1 changed file with 44 additions and 17 deletions.
61 changes: 44 additions & 17 deletions docs/2.guide/2.directory-structure/1.server.md
Expand Up @@ -7,33 +7,46 @@ description: The server/ directory is used to register API and server handlers t

# Server Directory

Nuxt automatically scans files inside the `~/server/api`, `~/server/routes`, and `~/server/middleware` directories to register API and server handlers with HMR support.
Nuxt automatically scans files inside these directories to register API and server handlers with HMR support:
- `~/server/api`
- `~/server/routes`
- `~/server/middleware`

Each file should export a default function defined with `defineEventHandler()`.
Each file should export a default function defined with `defineEventHandler()` or `eventHandler()` (alias).

The handler can directly return JSON data, a `Promise` or use `event.node.res.end()` to send response.
The handler can directly return JSON data, a `Promise` or use `event.node.res.end()` to send a response.

::ReadMore{link="https://nitro.unjs.io/guide/routing" title="Nitro Route Handling Docs"}
::

## Example

Create a new file in `server/api/hello.ts`:
**Example:** Create the `/api/hello` route with `server/api/hello.ts` file:

```ts [server/api/hello.ts]
export default defineEventHandler((event) => {
return {
api: 'works'
hello: 'world'
}
})
```

You can now universally call this API using `await $fetch('/api/hello')`.
You can now universally call this API in your pages and components:

```vue [pages/index.vue]
<script setup>
const { data } = await useFetch('/api/hello')
</script>
<template>
<pre>{{ data }}</pre>
</template>
```

Note that [h3 utilities](https://github.com/unjs/h3#utilities) are auto-imported.

:ReadMore{link="https://nitro.unjs.io/guide/routing" title="Nitro Route Handling Docs"}

## Server Routes

Files inside the `~/server/api` are automatically prefixed with `/api` in their route.
For adding server routes without `/api` prefix, you can instead put them into `~/server/routes` directory.

To add server routes without `/api` prefix, put them into `~/server/routes` directory.

**Example:**

Expand All @@ -57,7 +70,7 @@ Middleware handlers should not return anything (nor close or respond to the requ

```ts [server/middleware/log.ts]
export default defineEventHandler((event) => {
console.log('New request: ' + event.node.req.url)
console.log('New request: ' + getRequestURL(event))
})
```

Expand All @@ -79,18 +92,32 @@ export default defineNitroPlugin((nitroApp) => {
})
```

::ReadMore{link="https://nitro.unjs.io/guide/plugins" title="Nitro Plugins"}
::
:ReadMore{link="https://nitro.unjs.io/guide/plugins" title="Nitro Plugins"}

## Server Utilities

Server routes are powered by [unjs/h3](https://github.com/unjs/h3) which comes with a handy set of helpers.

::ReadMore{link="https://www.jsdocs.io/package/h3#package-index-functions" title="Available H3 Request Helpers"}
::
:ReadMore{link="https://www.jsdocs.io/package/h3#package-index-functions" title="Available H3 Request Helpers"}

You can add more helpers yourself inside the `~/server/utils` directory.

## Server Types

::alert{type="info"}
This feature is available from Nuxt >= 3.5
::

To improve clarity within your IDE between the auto-imports from 'nitro' and 'vue', you can add a `~/server/tsconfig.json` with the following content:

```json [server/tsconfig.json]
{
"extends": "../.nuxt/tsconfig.server.json"
}
```

Although right now these values won't be respected when type checking (`nuxi typecheck`), you should get better type hints in your IDE.

## Usage Examples

### Matching Route Parameters
Expand Down

0 comments on commit d53cc60

Please sign in to comment.