mirror of https://github.com/nuxt/nuxt.git
62 lines
1.6 KiB
Markdown
62 lines
1.6 KiB
Markdown
---
|
||
navigation.icon: IconDirectory
|
||
title: 'modules'
|
||
head.title: 'modules/'
|
||
description: Use the modules/ directory to automatically register local modules within your application.
|
||
---
|
||
|
||
# Modules Directory
|
||
|
||
::StabilityEdge
|
||
|
||
Nuxt scans the `modules/` directory and loads them before starting. It is a good place to place any local modules you develop while building your application.
|
||
|
||
The auto-registered files patterns are:
|
||
- `modules/*/index.ts`
|
||
- `modules/*.ts`
|
||
|
||
You don't need to add those local modules to your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) separately.
|
||
|
||
::code-group
|
||
```ts [modules/hello/index.ts]
|
||
// `nuxt/kit` is a helper subpath import you can use when defining local modules
|
||
// that means you do not need to add `@nuxt/kit` to your project's dependencies
|
||
import { createResolver, defineNuxtModule, addServerHandler } from 'nuxt/kit'
|
||
|
||
export default defineNuxtModule({
|
||
meta: {
|
||
name: 'hello'
|
||
},
|
||
setup () {
|
||
const { resolve } = createResolver(import.meta.url)
|
||
|
||
// Add an API route
|
||
addServerHandler({
|
||
route: '/api/hello',
|
||
handler: resolve('./runtime/api-route')
|
||
})
|
||
}
|
||
})
|
||
```
|
||
```ts [modules/hello/runtime/api-route.ts]
|
||
export default defineEventHandler(() => {
|
||
return { hello: 'world' }
|
||
}
|
||
```
|
||
::
|
||
|
||
When starting Nuxt, the `hello` module will be registered and the `/api/hello` route will be available.
|
||
|
||
The local modules are registered by alphabetical order. You can change the order by prefixing with a number if front of each directory:
|
||
|
||
`ˋ`md
|
||
modules/
|
||
1.first-module/
|
||
index.ts
|
||
2.second-module.ts
|
||
ˋ`ˋ
|
||
|
||
:ReadMore{link="/docs/guide/going-further/modules"}
|
||
|
||
::
|