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
    Tell Nuxt to scroll to the top before rendering the page or not. Navigation is independent from rendering, so scroll behavior is always triggered even when the page doesn't re-render (e.g. when using a fixed key). Set scrollToTop: false to disable scrolling in such cases. If you want to overwrite the default scroll behavior of Nuxt, you can do so in ~/app/router.options.ts (see custom routing) for more info.
  
  [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>