mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-12 15:27:13 +00:00
1.9 KiB
1.9 KiB
title | head.title | description | navigation.icon |
---|---|---|---|
modules | modules/ | Use the modules/ directory to automatically register local modules within your application. | i-ph-folder |
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
separately.
::code-group
// `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')
})
}
})
export default defineEventHandler(() => {
return { hello: 'world' }
})
::
When starting Nuxt, the hello
module will be registered and the /api/hello
route will be available.
Modules are executed in the following sequence:
- First, the modules defined in
nuxt.config.ts
are loaded. - Then, modules found in the
modules/
directory are executed, and they load in alphabetical order.
You can change the order of local module by adding a number to the front of each directory name:
modules/
1.first-module/
index.ts
2.second-module.ts
:read-more{to="/docs/guide/going-further/modules"}
::tip{icon="i-ph-video" to="https://vueschool.io/lessons/creating-your-first-module-from-scratch?friend=nuxt" target="_blank"} Watch Vue School video about Nuxt private modules. ::