Páginas

Nuxt Kit proporciona un conjunto de utilidades para ayudarte a crear y usar páginas. Puedes usar estas utilidades para manipular la configuración de las páginas o para definir reglas de rutas.

`extendPages`

En Nuxt, las rutas se generan automáticamente basándose en la estructura de los archivos en el directorio pages. Sin embargo, puede haber escenarios en los que desees personalizar estas rutas. Por ejemplo, podrías necesitar agregar una ruta para una página dinámica no generada por Nuxt, eliminar una ruta existente o modificar la configuración de una ruta. Para tales personalizaciones, Nuxt ofrece la función extendPages, que te permite extender y alterar la configuración de las páginas.

Mira el video de Vue School sobre extendPages.

Uso

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

Tipo

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

Parámetros

callback: Una función que será llamada con la configuración de las páginas. Puedes alterar este array añadiendo, eliminando o modificando sus elementos. Nota: Debes modificar directamente el array de páginas proporcionado, ya que los cambios realizados en un array copiado no se reflejarán en la configuración.

Propiedad	Tipo	Requerido	Descripción
`name`	`string`	`false`	El nombre de la ruta. Útil para la navegación programática e identificación de rutas.
`path`	`string`	`false`	La ruta URL de la ruta. Si no se establece, Nuxt la inferirá de la ubicación del archivo.
`file`	`string`	`false`	Ruta al archivo Vue que debe usarse como el componente para la ruta.
`meta`	`Record<string, any>`	`false`	Metadatos personalizados para la ruta. Se pueden usar en diseños, middlewares o guardias de navegación.
`alias`	`string[] \| string`	`false`	Una o más rutas alias para la ruta. Útil para soportar múltiples URLs.
`redirect`	`RouteLocationRaw`	`false`	Regla de redirección para la ruta. Soporta rutas nombradas, objetos o rutas de cadena.
`children`	`NuxtPage[]`	`false`	Rutas hijas anidadas bajo esta ruta para anidamiento de diseño o vista.

`extendRouteRules`

Nuxt está impulsado por el motor de servidor Nitro. Con Nitro, puedes incorporar lógica de alto nivel directamente en tu configuración, lo cual es útil para acciones como redirecciones, proxy, caché y agregar encabezados a las rutas. Esta configuración funciona asociando patrones de rutas con configuraciones específicas de rutas.

Puedes leer más sobre las reglas de rutas de Nitro en la documentación de Nitro.

Mira el video de Vue School sobre agregar reglas de rutas y middlewares de rutas.

Uso

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

Tipo

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

Parámetros

route: Un patrón de ruta para coincidir.
rule: Una configuración de regla de ruta para aplicar a la ruta coincidente.

Sobre las configuraciones de reglas de rutas, puedes obtener más detalles en Renderizado Híbrido > Reglas de Rutas.

options: Un objeto para pasar a la configuración de la ruta. Si override está establecido en true, sobrescribirá la configuración de la ruta existente.

Nombre	Tipo	Predeterminado	Descripción
`override`	`boolean`	`false`	Sobrescribir la configuración de la regla de ruta, el valor predeterminado es false

`addRouteMiddleware`

Registra middlewares de rutas para que estén disponibles para todas las rutas o para rutas específicas.

Los middlewares de rutas también pueden definirse en plugins a través del composable addRouteMiddleware.

Lee más sobre los middlewares de rutas en la documentación de middleware de rutas.

Mira el video de Vue School sobre agregar reglas de rutas y middlewares de rutas.

Uso

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

Tipo

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

Parámetros

input: Un objeto de middleware o un array de objetos de middleware con las siguientes propiedades:

Propiedad	Tipo	Requerido	Descripción
`name`	`string`	`true`	El nombre del middleware.
`path`	`string`	`true`	La ruta del archivo al middleware.
`global`	`boolean`	`false`	Si se establece en `true`, aplica el middleware a todas las rutas.

options: Un objeto con las siguientes propiedades:

Propiedad	Tipo	Predeterminado	Descripción
`override`	`boolean`	`false`	Si es `true`, reemplaza el middleware con el mismo nombre.
`prepend`	`boolean`	`false`	Si es `true`, antepone el middleware antes de los middlewares existentes.

※Esta página es una traducción no oficial de la documentación oficial de Nuxt.js.

La página correspondiente en la documentación oficial está aquí:
https://nuxt.com/docs/3.x/api/kit/pages