modules
Use the modules/ directory to automatically register local modules within your application.
It is a good place to place any local modules you develop while building your application.
The auto-registered files patterns are:
modules/*/index.tsmodules/*.ts
You don't need to add those local modules to your nuxt.config.ts separately.
// `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 { addComponentsDir, addServerHandler, createResolver, defineNuxtModule } from 'nuxt/kit'
export default defineNuxtModule({
meta: {
name: 'hello',
},
setup () {
const resolver = createResolver(import.meta.url)
// Add an API route
addServerHandler({
route: '/api/hello',
handler: resolver.resolve('./runtime/api-route'),
})
// Add components
addComponentsDir({
path: resolver.resolve('./runtime/app/components'),
pathPrefix: true, // Prefix your exports to avoid conflicts with user code or other modules
})
},
})
export default defineEventHandler(() => {
return { hello: 'world' }
})
When starting Nuxt, the hello module will be registered and the /api/hello route will be available.
Note that all components, pages, composables and other files that would be normally placed in your
app/ directory need to be in modules/your-module/runtime/app/. This ensures they can be type-checked properly.Modules are executed in the following sequence:
- First, the modules defined in
nuxt.config.tsare 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:
Directory structure
modules/
1.first-module/
index.ts
2.second-module.ts