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

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

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

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 for available options.

options: Options object:

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

Usage

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

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

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