Nuxt/docs/2.guide/2.directory-structure/1.modules.md

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. ::