Nuxt/docs/2.guide/2.directory-structure/1.modules.md
2023-03-05 10:51:10 +01:00

62 lines
1.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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"}
::