definePageMeta es una macro del compilador que puedes usar para establecer metadatos para tus componentes de página ubicados en el directorio pages/ (a menos que se establezca de otra manera). De esta manera, puedes establecer metadatos personalizados para cada ruta estática o dinámica de tu aplicación 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

  Un objeto que acepta los siguientes metadatos de página:

  name

  • Tipo: string

    Puedes definir un nombre para la ruta de esta página. Por defecto, el nombre se genera basado en la ruta dentro del directorio pages/.

  path

  • Tipo: string

    Puedes definir una expresión regular personalizada si tienes un patrón más complejo que no puede expresarse con el nombre del archivo.

  props

  • Tipo: RouteRecordRaw['props']

    Permite acceder a los params de la ruta como props pasados al componente de la página.

  alias

  • Tipo: string | string[]

    Alias para el registro. Permite definir rutas adicionales que se comportarán como una copia del registro. Permite tener atajos de rutas como /users/:id y /u/:id. Todos los valores de alias y path deben compartir los mismos params.

  keepalive

  • Tipo: boolean | KeepAliveProps

    Establece en true cuando deseas preservar el estado de la página a través de cambios de ruta o usa KeepAliveProps para un control más detallado.

  key

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

    Establece el valor de key cuando necesitas más control sobre cuándo se vuelve a renderizar el componente <NuxtPage>.

  layout

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

    Establece un nombre estático o dinámico del layout para cada ruta. Esto se puede establecer en false en caso de que se necesite desactivar el layout predeterminado.

  layoutTransition

  • Tipo: boolean | TransitionProps

    Establece el nombre de la transición a aplicar para el layout actual. También puedes establecer este valor en false para desactivar la transición del layout.

  middleware

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

    Define middleware anónimo o nombrado directamente dentro de definePageMeta. Aprende más sobre middleware de rutas.

  pageTransition

  • Tipo: boolean | TransitionProps

    Establece el nombre de la transición a aplicar para la página actual. También puedes establecer este valor en false para desactivar la transición de la página.

  viewTransition

  • Tipo: boolean | 'always'

    Función experimental, solo disponible cuando está habilitada en tu archivo nuxt.config
    Habilita/deshabilita las transiciones de vista para la página actual. Si se establece en true, Nuxt no aplicará la transición si el navegador del usuario coincide con prefers-reduced-motion: reduce (recomendado). Si se establece en always, Nuxt siempre aplicará la transición.

  redirect

  • Tipo: RouteRecordRedirectOption

    Dónde redirigir si la ruta se coincide directamente. La redirección ocurre antes de cualquier guardia de navegación y desencadena una nueva navegación con la nueva ubicación de destino.

  validate

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

    Valida si una ruta dada puede ser renderizada válidamente con esta página. Devuelve true si es válida, o false si no lo es. Si no se puede encontrar otra coincidencia, esto significará un 404. También puedes devolver directamente un objeto con statusCode/statusMessage para responder inmediatamente con un error (no se comprobarán otras coincidencias).

  scrollToTop

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

    Indica a Nuxt si debe desplazarse hacia arriba antes de renderizar la página o no. Si deseas sobrescribir el comportamiento de desplazamiento predeterminado de Nuxt, puedes hacerlo en ~/app/router.options.ts (ver enrutamiento personalizado) para más información.

  [key: string]

  • Tipo: any

    Además de las propiedades anteriores, también puedes establecer metadatos personalizados. Puedes desear hacerlo de una manera segura en cuanto a tipos aumentando el tipo del objeto meta.

Ejemplos

Uso Básico

El ejemplo a continuación demuestra:

• cómo key puede ser una función que devuelve un valor;
• cómo la propiedad keepalive asegura que el componente <modal> no se almacene en caché al cambiar entre múltiples componentes;
• agregar pageType como una propiedad personalizada:

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

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

  pageType: 'Checkout'
})

Definiendo Middleware

El ejemplo a continuación muestra cómo el middleware puede definirse usando una function directamente dentro de definePageMeta o establecerse como una string que coincide con el nombre del archivo de middleware ubicado en el directorio middleware/:

definePageMeta({
  // define middleware como una función
  middleware: [
    function (to, from) {
      const auth = useState('auth')

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

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

  // ... o una cadena
  middleware: 'auth'

  // ... o múltiples cadenas
  middleware: ['auth', 'another-named-middleware']
})

Usando una Expresión Regular Personalizada

Una expresión regular personalizada es una buena manera de resolver conflictos entre rutas superpuestas, por ejemplo:

Las dos rutas "/test-category" y "/1234-post" coinciden tanto con las rutas de página [postId]-[postSlug].vue como [categorySlug].vue.

Para asegurarnos de que solo estamos coincidiendo dígitos (\d+) para postId en la ruta [postId]-[postSlug], podemos agregar lo siguiente al template de la página [postId]-[postSlug].vue:

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

Para más ejemplos, consulta Sintaxis de Coincidencia de Vue Router.

Definiendo Layout

Puedes definir el layout que coincide con el nombre del archivo del layout ubicado (por defecto) en el directorio layouts/. También puedes desactivar el layout estableciendo layout en false:

definePageMeta({
  // establece un layout personalizado
  layout: 'admin'

  // ... o desactiva un layout predeterminado
  layout: false
})