definePageMeta é uma macro de compilador que você pode usar para definir metadados para seus componentes de página localizados no diretório pages/ (a menos que definido de outra forma). Desta forma, você pode definir metadados personalizados para cada rota estática ou dinâmica da sua aplicação Nuxt.

definePageMeta({
  layout: 'default'
})

Tipo

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[]
  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
}

Parâmetros

meta

• Tipo: PageMeta

  Um objeto que aceita os seguintes metadados de página:

  name

  • Tipo: string

    Você pode definir um nome para a rota desta página. Por padrão, o nome é gerado com base no caminho dentro do diretório pages/.

  path

  • Tipo: string

    Você pode definir uma expressão regular personalizada se tiver um padrão mais complexo do que pode ser expresso com o nome do arquivo.

  props

  • Tipo: RouteRecordRaw['props']

    Permite acessar os params da rota como props passadas para o componente de página.

  alias

  • Tipo: string | string[]

    Aliases para o registro. Permite definir caminhos extras que se comportarão como uma cópia do registro. Permite ter atalhos de caminhos como /users/:id e /u/:id. Todos os valores de alias e path devem compartilhar os mesmos parâmetros.

  keepalive

  • Tipo: boolean | KeepAliveProps

    Defina como true quando você quiser preservar o estado da página entre mudanças de rota ou use o KeepAliveProps para um controle mais detalhado.

  key

  • Tipo: false | string | ((route: RouteLocationNormalizedLoaded) => string)

    Defina o valor de key quando precisar de mais controle sobre quando o componente <NuxtPage> é re-renderizado.

  layout

  • Tipo: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>

    Defina um nome estático ou dinâmico do layout para cada rota. Isso pode ser definido como false caso o layout padrão precise ser desativado.

  layoutTransition

  • Tipo: boolean | TransitionProps

    Defina o nome da transição a ser aplicada para o layout atual. Você também pode definir este valor como false para desativar a transição do layout.

  middleware

  • Tipo: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>

    Defina middleware anônimo ou nomeado diretamente dentro de definePageMeta. Saiba mais sobre middleware de rota.

  pageTransition

  • Tipo: boolean | TransitionProps

    Defina o nome da transição a ser aplicada para a página atual. Você também pode definir este valor como false para desativar a transição da página.

  viewTransition

  • Tipo: boolean | 'always'

    Recurso experimental, disponível apenas quando ativado no seu arquivo nuxt.config
    Ative/desative Transições de Visualização para a página atual. Se definido como true, o Nuxt não aplicará a transição se o navegador do usuário corresponder a prefers-reduced-motion: reduce (recomendado). Se definido como always, o Nuxt sempre aplicará a transição.

  redirect

  • Tipo: RouteRecordRedirectOption

    Para onde redirecionar se a rota for diretamente correspondida. O redirecionamento acontece antes de qualquer guarda de navegação e aciona uma nova navegação com o novo local de destino.

  validate

  • Tipo: (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>

    Valide se uma determinada rota pode ser renderizada validamente com esta página. Retorne true se for válido, ou false se não for. Se outra correspondência não puder ser encontrada, isso significará um 404. Você também pode retornar diretamente um objeto com statusCode/statusMessage para responder imediatamente com um erro (outras correspondências não serão verificadas).

  scrollToTop

  • Tipo: boolean | (to: RouteLocationNormalized, from: RouteLocationNormalized) => boolean

    Informe ao Nuxt para rolar até o topo antes de renderizar a página ou não. Se você quiser sobrescrever o comportamento padrão de rolagem do Nuxt, pode fazê-lo em ~/app/router.options.ts (veja roteamento personalizado) para mais informações.

  [key: string]

  • Tipo: any

    Além das propriedades acima, você também pode definir metadados personalizados. Você pode querer fazer isso de uma maneira segura em termos de tipo aumentando o tipo do objeto meta.

Exemplos

Uso Básico

O exemplo abaixo demonstra:

• como key pode ser uma função que retorna um valor;
• como a propriedade keepalive garante que o componente <modal> não seja armazenado em cache ao alternar entre vários componentes;
• adicionando pageType como uma propriedade personalizada:

definePageMeta({
  key: (route) => route.fullPath,

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

  pageType: 'Checkout'
})

Definindo Middleware

O exemplo abaixo mostra como o middleware pode ser definido usando uma function diretamente dentro do definePageMeta ou definido como uma string que corresponde ao nome do arquivo de middleware localizado no diretório middleware/:

definePageMeta({
  // define middleware como uma função
  middleware: [
    function (to, from) {
      const auth = useState('auth')

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

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

  // ... ou uma string
  middleware: 'auth'

  // ... ou múltiplas strings
  middleware: ['auth', 'another-named-middleware']
})

Usando uma Expressão Regular Personalizada

Uma expressão regular personalizada é uma boa maneira de resolver conflitos entre rotas sobrepostas, por exemplo:

As duas rotas "/test-category" e "/1234-post" correspondem tanto às rotas de página [postId]-[postSlug].vue quanto [categorySlug].vue.

Para garantir que estamos apenas correspondendo dígitos (\d+) para postId na rota [postId]-[postSlug], podemos adicionar o seguinte ao template da página [postId]-[postSlug].vue:

definePageMeta({
  path: '/:postId(\\d+)-:postSlug' 
})

Para mais exemplos, veja Sintaxe de Correspondência do Vue Router.

Definindo Layout

Você pode definir o layout que corresponde ao nome do arquivo do layout localizado (por padrão) no diretório layouts/. Você também pode desativar o layout definindo layout como false:

definePageMeta({
  // definir layout personalizado
  layout: 'admin'

  // ... ou desativar um layout padrão
  layout: false
})