Страницы

Исходники
Утилиты Nuxt Kit для страниц и правил маршрутов.

extendPages

Маршруты в Nuxt генерируются по структуре файлов в app/pages. Чтобы изменить маршруты (добавить страницу не из файлов, удалить или изменить маршрут), используется extendPages — расширение и изменение конфигурации страниц.

Видео Vue School про extendPages.

Использование

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'),
      })
    })
  },
})

Тип

function extendPages (callback: (pages: NuxtPage[]) => void): void

Параметры

callback: функция, вызываемая с массивом страниц. Можно изменять массив (добавлять, удалять, менять элементы). Изменения нужно вносить в переданный массив — копия не повлияет на конфигурацию.

СвойствоТипОбязательныйОписание
namestringнетИмя маршрута (программная навигация, идентификация).
pathstringнетURL маршрута. Если не задан — выводится из расположения файла.
filestringнетПуть к Vue-файлу компонента маршрута.
metaRecord<string, any>нетМетаданные маршрута (макеты, middleware, навигационные гарды).
aliasstring[] | stringнетОдин или несколько алиасов маршрута.
redirectRouteLocationRawнетПравило редиректа (именованный маршрут, объект или путь).
childrenNuxtPage[]нетВложенные дочерние маршруты.

extendRouteRules

Nuxt использует серверный движок Nitro. В конфигурации можно задавать правила для маршрутов: редиректы, прокси, кэш, заголовки. Правила привязываются к паттернам маршрутов.

Подробнее: документация Nitro — route rules.
Видео Vue School про route rules и route middlewares.

Использование

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,
      },
    })
  },
})

Тип

function extendRouteRules (route: string, rule: NitroRouteConfig, options?: ExtendRouteRulesOptions): void

Параметры

route: паттерн маршрута для сопоставления.
rule: конфигурация правила для совпадающих маршрутов.

Подробнее о route rules: Hybrid Rendering > Route Rules.

options: при override: true перезаписывает существующую конфигурацию маршрута.

СвойствоТипПо умолчаниюОписание
overridebooleanfalseПерезаписать правило маршрута.

addRouteMiddleware

Регистрирует route middleware для всех маршрутов или для выбранных.

Middleware можно также задавать в плагинах через композабл addRouteMiddleware.

Подробнее: Route middleware.
Видео Vue School про route rules и route middlewares.

Использование

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 })
  },
})

Тип

function addRouteMiddleware (input: NuxtMiddleware | NuxtMiddleware[], options?: AddRouteMiddlewareOptions): void

Параметры

input: объект middleware или массив таких объектов:

СвойствоТипОбязательныйОписание
namestringдаИмя middleware.
pathstringдаПуть к файлу middleware.
globalbooleanнетtrue — применять ко всем маршрутам.

options:

СвойствоТипПо умолчаниюОписание
overridebooleanfalsetrue — заменить middleware с тем же именем.
prependbooleanfalsetrue — добавить перед существующими middleware.