Skip to content

Commit

Permalink
2 updates by Nuxt Studio
Browse files Browse the repository at this point in the history
  • Loading branch information
atinux authored Feb 23, 2023
1 parent f0a92d0 commit 1f78364
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 27 deletions.
49 changes: 31 additions & 18 deletions docs/content/1.guide/1.introduction/3.routing.md
Original file line number Diff line number Diff line change
@@ -1,50 +1,63 @@
# Route Handling
---
title: Routing
---

Nitro supports file-based routing for your API routes.
# Filesystem Routing

Handler files inside `routes/` and `api/` directory will be automatically mapped to [unjs/h3](https://github.com/unjs/h3) routes.
Nitro supports file-based routing for your API routes.

**Note:** `api/` is a shortcut for `routes/api` as a common prefix. However, please note that some deployment providers use `api/` directory for their API format. You can simply use the `routes/api` or `srcDir` option to move everything under `src/` or `server/` directory.
Handler files inside `routes/` directory will be automatically mapped to [unjs/h3](https://github.com/unjs/h3) routes.

## Usage

Check out [h3 JSDocs](https://www.jsdocs.io/package/h3#package-index-functions) for all available utilities.

## Examples
```md
routes/
api/
test.ts <-- /api/test
hello.ts <-- /hello
```

**Example:** Simple API route
### Simple route

```ts
// routes/test.ts
export default eventHandler(() => 'Hello World!')
```

**Example:** API route with params
### Route with params

```js
// routes/hello/[name].ts
export default eventHandler(event => `Hello ${event.context.params.name}!`)
```

**Example:** API route with a specific HTTP request method (get, post, put, delete, options and so on)
### Specific request method

```js
// routes/user.get.ts
export default eventHandler(async event => {
API route with a specific HTTP request method (get, post, put, delete, options and so on).

::code-group
```js [GET]
// routes/users/[id].get.ts
export default eventHandler(async (event) => {
const { id } = event.context.params
// TODO: fetch user by id
return `User profile!`
})
```

```js
// routes/user.post.ts
```js [POST]
// routes/users.post.ts
export default eventHandler(async event => {
const body = await readBody(event)
// TODO: Handle body and update user
return `User updated!`
// TODO: Handle body and add user
return { updated: true }
})
```
::

Check out [h3 JSDocs](https://www.jsdocs.io/package/h3#package-index-functions) for all available utilities like `readBody`.

**Example:** Catch all page
### Catch all route

```js
// routes/[...].ts
Expand Down
18 changes: 9 additions & 9 deletions docs/content/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,22 +25,22 @@ snippet:
⚗️ Nitro

#description
Build and Deploy Universal JavaScript Servers, everywhere.
Build and Deploy Universal JavaScript Servers, everywhere. :br The engine powering [Nuxt 3](https://nuxt.com) and open to anyone.
::

::card-grid
::card{icon=🐇}
#title
Rapid Development
#description
Zero config setup with hot module replacement.
Zero config setup with hot module replacement for server code.
::

::card{icon=😌}
#title
Multi-Provider
Deploy Everywhere
#description
Deploy sthe ame codebase to any [deployment provider](/deploy) without extra config.
Deploy the same codebase to any [deployment provider](/deploy) with no extra config.
::

::card{icon=💼}
Expand All @@ -54,7 +54,7 @@ Build and Deploy Universal JavaScript Servers, everywhere.
#title
Filesystem Routing
#description
Automatically registers Server and API routes.
[Automatically registers](/guide/introduction/routing) server and API routes.
::

::card{icon=🤏}
Expand Down Expand Up @@ -96,20 +96,20 @@ Build and Deploy Universal JavaScript Servers, everywhere.
#title
Hackable
#description
Built to be customized.
Built to be customized with the [plugins](/guide/advanced/plugins) hooks system.
::

::card{icon=}
#title
Auto Imports
#description
Automatically import utilities for the lazy folks and a minimal codebase.
Automatically import utilities for a minimal and clean codebase. Only the used ones will be added to the final bundle.
::

::card{icon=🏛️}
#title
Backward compatible
Backward Compatible
#description
Best-effort compatibility for using legacy npm packages, CommonJS and mocking Node.js modules for workers.
So you can use legacy npm packages, CommonJS and mocking Node.js modules for workers.
::
::

0 comments on commit 1f78364

Please sign in to comment.