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

---
navigation.icon: IconDirectory
title: 'modules'
head.title: 'modules/'
description: Use the modules/ directory to automatically register local modules within your application.
---

# Modules Directory

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