definePageMeta

definePageMeta — это макрос компилятора, который вы можете использовать для установки метаданных для компонентов страниц в каталоге pages/ (если не задано иное). Так вы задаёте свои метаданные для каждого статического или динамического маршрута приложения Nuxt.

<script setup lang="ts">
definePageMeta({
  layout: 'default',
})
</script>

Тип

export function definePageMeta (meta: PageMeta): void

interface PageMeta {
  validate?: ((route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>)
  redirect?: RouteRecordRedirectOption
  name?: string
  path?: string
  props?: RouteRecordRaw['props']
  alias?: string | string[]
  groups?: string[]
  pageTransition?: boolean | TransitionProps
  layoutTransition?: boolean | TransitionProps
  viewTransition?: boolean | 'always'
  key?: false | string | ((route: RouteLocationNormalizedLoaded) => string)
  keepalive?: boolean | KeepAliveProps
  layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
  middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
  scrollToTop?: boolean | ((to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean)
  [key: string]: unknown
}

Параметры

meta

• тип: PageMeta
  Объект с метаданными страницы:
  name
  • тип: string
    Имя маршрута этой страницы. По умолчанию оно выводится из пути внутри каталога pages/.
  
  path
  • тип: string
    Можно задать пользовательское регулярное выражение, если шаблон сложнее, чем имя файла.
  
  props
  • тип: RouteRecordRaw['props']
    Доступ к params маршрута как к пропсам компонента страницы.
  
  alias
  • тип: string | string[]
    Псевдонимы записи: дополнительные пути с тем же поведением, например /users/:id и /u/:id. У всех значений alias и path должны совпадать параметры.
  
  groups
  • тип: string[]
    Группы маршрутов страницы по структуре папок. Заполняется автоматически для страниц внутри групп маршрутов.
  
  keepalive
  • тип: boolean | KeepAliveProps
true — сохранять состояние страницы при смене маршрута; либо уточните поведение через KeepAliveProps.
  
  key
  • тип: false | string | ((route: RouteLocationNormalizedLoaded) => string)
    Значение key, если нужно управлять перерисовкой <NuxtPage>.
  
  layout
  • тип: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
    Статическое или динамическое имя лейаута для маршрута. false — отключить лейаут по умолчанию.
  
  layoutTransition
  • тип: boolean | TransitionProps
    Имя перехода для текущего лейаута; false — отключить переход лейаута.
  
  middleware
  • тип: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
    Анонимный или именованный middleware внутри definePageMeta. Подробнее — middleware маршрутов.
  
  pageTransition
  • тип: boolean | TransitionProps
    Имя перехода для страницы; false — отключить переход страницы.
  
  viewTransition
  • тип: boolean | 'always'
    Экспериментально, только если включено в nuxt.config
    Включить или выключить View Transitions для страницы. При true Nuxt не применит переход, если у пользователя prefers-reduced-motion: reduce (рекомендуется). При always переход применяется всегда.
  
  redirect
  • тип: RouteRecordRedirectOption
    Куда перенаправить при прямом совпадении маршрута. Выполняется до хуков навигации и запускает новую навигацию.
  
  validate
  • тип: (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>
    Проверка, подходит ли маршрут для этой страницы: true / false; без другого совпадения — 404. Можно вернуть объект с status/statusText для немедленной ошибки (остальные совпадения не проверяются).
  
  scrollToTop
  • тип: boolean | (to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean
    Прокручивать ли страницу вверх перед отрисовкой. Своё поведение можно задать в ~/router.options.ts (см. кастомную маршрутизацию).
  
  [key: string]
  • тип: any
    Произвольные пользовательские метаданные; типобезопасно — через расширение типа meta.

Примеры

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

Ниже показано:

• как key может быть функцией;
• как keepalive исключает кэширование <modal> при переключении;
• как добавить пользовательское поле pageType:

<script setup lang="ts">
definePageMeta({
  key: route => route.fullPath,

  keepalive: {
    exclude: ['modal'],
  },

  pageType: 'Checkout',
})
</script>

Определение middleware

Middleware задаётся функцией прямо в definePageMeta, строкой с именем файла из middleware/ или массивом строк:

<script setup lang="ts">
definePageMeta({
  // middleware функцией
  middleware: [
    function (to, from) {
      const auth = useState('auth')

      if (!auth.value.authenticated) {
        return navigateTo('/login')
      }

      if (to.path !== '/checkout') {
        return navigateTo('/checkout')
      }
    },
  ],

  // ... или строкой
  middleware: 'auth',

  // ... или несколькими строками
  middleware: ['auth', 'another-named-middleware'],
})
</script>

Пользовательское регулярное выражение

Регулярка помогает разрешить конфликт пересекающихся маршрутов.

Маршруты «/test-category» и «/1234-post» подходят и под [postId]-[postSlug].vue, и под [categorySlug].vue.

Чтобы для [postId]-[postSlug] postId совпадал только с цифрами (\d+), в шаблоне страницы можно указать:

<script setup lang="ts">
definePageMeta({
  path: '/:postId(\\d+)-:postSlug',
})
</script>

Ещё примеры — синтаксис сопоставления Vue Router.

Определение лейаута

Имя лейаута совпадает с именем файла в layouts/ (по умолчанию). layout: false отключает лейаут:

<script setup lang="ts">
definePageMeta({
  // свой лейаут
  layout: 'admin',

  // ... или без лейаута по умолчанию
  layout: false,
})
</script>