> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/nuxt/nuxt/llms.txt
> Use this file to discover all available pages before exploring further.

# Pages

> Pages utilities to manipulate pages configuration and define route rules

# Pages

Nuxt Kit provides a set of utilities to help you create and use pages. You can use these utilities to manipulate the pages configuration or to define route rules.

## `extendPages`

In Nuxt, routes are automatically generated based on the structure of files in the `app/pages` directory. However, you can customize these routes using the `extendPages` feature.

### Type

```ts theme={null}
function extendPages(callback: (pages: NuxtPage[]) => void): void
```

### Parameters

**`callback`**: A function that will be called with the pages configuration. You can alter this array by adding, deleting, or modifying its elements.

**Note:** You should modify the provided pages array directly, as changes made to a copied array will not be reflected in the configuration.

Each page object has the following properties:

| Property   | Type                  | Required | Description                                                                               |
| ---------- | --------------------- | -------- | ----------------------------------------------------------------------------------------- |
| `name`     | `string`              | `false`  | The name of the route. Useful for programmatic navigation.                                |
| `path`     | `string`              | `false`  | The route URL path. If not set, Nuxt will infer it from the file location.                |
| `file`     | `string`              | `false`  | Path to the Vue file that should be used as the component for the route.                  |
| `meta`     | `Record<string, any>` | `false`  | Custom metadata for the route. Can be used in layouts, middlewares, or navigation guards. |
| `alias`    | `string[] \| string`  | `false`  | One or more alias paths for the route.                                                    |
| `redirect` | `RouteLocationRaw`    | `false`  | Redirect rule for the route. Supports named routes, objects, or string paths.             |
| `children` | `NuxtPage[]`          | `false`  | Nested child routes under this route.                                                     |

### Usage

```ts theme={null}
import { createResolver, defineNuxtModule, extendPages } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options) {
    const { resolve } = createResolver(import.meta.url)

    extendPages((pages) => {
      pages.unshift({
        name: 'prismic-preview',
        path: '/preview',
        file: resolve('runtime/preview.vue'),
      })
    })
  },
})
```

## `extendRouteRules`

Nuxt is powered by the Nitro server engine. With Nitro, you can incorporate high-level logic directly into your configuration for actions like redirects, proxying, caching, and appending headers.

### Type

```ts theme={null}
function extendRouteRules(
  route: string,
  rule: NitroRouteConfig,
  options?: ExtendRouteRulesOptions
): void
```

### Parameters

**`route`**: A route pattern to match against.

**`rule`**: A route rule configuration to apply to the matched route. See [Nitro route rules](https://nitro.build/guide/routing#route-rules) for available options.

**`options`**: Options object:

| Name       | Type      | Default | Description                                      |
| ---------- | --------- | ------- | ------------------------------------------------ |
| `override` | `boolean` | `false` | Override route rule config if it already exists. |

### Usage

```ts theme={null}
import { createResolver, defineNuxtModule, extendPages, extendRouteRules } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options) {
    const { resolve } = createResolver(import.meta.url)

    extendPages((pages) => {
      pages.unshift({
        name: 'preview-new',
        path: '/preview-new',
        file: resolve('runtime/preview.vue'),
      })
    })

    extendRouteRules('/preview', {
      redirect: {
        to: '/preview-new',
        statusCode: 302,
      },
    })

    extendRouteRules('/preview-new', {
      cache: {
        maxAge: 60 * 60 * 24 * 7,
      },
    })
  },
})
```

## `addRouteMiddleware`

Registers route middlewares to be available for all routes or for specific routes.

Route middlewares can also be defined in plugins via the `addRouteMiddleware` composable.

### Type

```ts theme={null}
function addRouteMiddleware(
  input: NuxtMiddleware | NuxtMiddleware[],
  options?: AddRouteMiddlewareOptions
): void
```

### Parameters

**`input`**: A middleware object or an array of middleware objects:

| Property | Type      | Required | Description                                         |
| -------- | --------- | -------- | --------------------------------------------------- |
| `name`   | `string`  | `true`   | The name of the middleware.                         |
| `path`   | `string`  | `true`   | The file path to the middleware.                    |
| `global` | `boolean` | `false`  | If set to `true`, applies middleware to all routes. |

**`options`**: Options object:

| Property   | Type      | Default | Description                                                 |
| ---------- | --------- | ------- | ----------------------------------------------------------- |
| `override` | `boolean` | `false` | If `true`, replaces middleware with the same name.          |
| `prepend`  | `boolean` | `false` | If `true`, prepends middleware before existing middlewares. |

### Usage

```ts theme={null}
import { addRouteMiddleware, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    const { resolve } = createResolver(import.meta.url)

    addRouteMiddleware({
      name: 'auth',
      path: resolve('runtime/auth'),
      global: true,
    }, { prepend: true })
  },
})
```

## Source

[View source on GitHub](https://github.com/nuxt/nuxt/blob/main/packages/kit/src/pages.ts)