Uso

Las páginas son componentes de Vue y pueden tener cualquier extensión válida que Nuxt soporte (por defecto .vue, .js, .jsx, .mjs, .ts o .tsx).

Nuxt creará automáticamente una ruta para cada página en tu directorio ~/pages/.

<template>
  <h1>Página de inicio</h1>
</template>

El archivo pages/index.vue se mapeará a la ruta / de tu aplicación.

Si estás usando app.vue, asegúrate de usar el componente <NuxtPage/> para mostrar la página actual:

<template>
  <div>
    <!-- Marcado compartido en todas las páginas, ej: NavBar -->
    <NuxtPage />
  </div>
</template>

Las páginas deben tener un único elemento raíz para permitir transiciones de ruta entre páginas. Los comentarios HTML también se consideran elementos.

Esto significa que cuando la ruta se renderiza en el servidor o se genera estáticamente, podrás ver su contenido correctamente, pero cuando navegas hacia esa ruta durante la navegación del lado del cliente, la transición entre rutas fallará y verás que la ruta no se renderizará.

Aquí hay algunos ejemplos para ilustrar cómo se ve una página con un único elemento raíz:

<template>
  <div>
    <!-- Esta página tiene correctamente solo un único elemento raíz -->
    Contenido de la página
  </div>
</template>

Rutas Dinámicas

Si colocas algo entre corchetes, se convertirá en un parámetro de ruta dinámica. Puedes combinar múltiples parámetros e incluso texto no dinámico dentro de un nombre de archivo o directorio.

Si deseas que un parámetro sea opcional, debes encerrarlo en dobles corchetes, por ejemplo, ~/pages/[[slug]]/index.vue o ~/pages/[[slug]].vue coincidirán tanto con / como con /test.

-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

Dado el ejemplo anterior, puedes acceder a group/id dentro de tu componente a través del objeto $route:

<template>
  <p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>

Navegar a /users-admins/123 renderizaría:

<p>admins - 123</p>

Si deseas acceder a la ruta usando la API de Composición, hay una función global useRoute que te permitirá acceder a la ruta tal como this.$route en la API de Opciones.

const route = useRoute()

if (route.params.group === 'admins' && !route.params.id) {
  console.log('¡Advertencia! Asegúrate de que el usuario esté autenticado.')
}

Ruta Catch-all

Si necesitas una ruta catch-all, la creas usando un archivo llamado [...slug].vue. Esto coincidirá con todas las rutas bajo ese camino.

<template>
  <p>{{ $route.params.slug }}</p>
</template>

Navegar a /hello/world renderizaría:

<p>["hello", "world"]</p>

Rutas Anidadas

Es posible mostrar rutas anidadas con <NuxtPage>.

Ejemplo:

-| pages/
---| parent/
-----| child.vue
---| parent.vue

Este árbol de archivos generará estas rutas:

[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

Para mostrar el componente child.vue, debes insertar el componente <NuxtPage> dentro de pages/parent.vue:

<template>
  <div>
    <h1>Soy la vista padre</h1>
    <NuxtPage :foobar="123" />
  </div>
</template>

const props = defineProps(['foobar'])

console.log(props.foobar)

Claves de Ruta Hija

Si deseas más control sobre cuándo se vuelve a renderizar el componente <NuxtPage> (por ejemplo, para transiciones), puedes pasar una cadena o función a través de la prop pageKey, o puedes definir un valor key a través de definePageMeta:

<template>
  <div>
    <h1>Soy la vista padre</h1>
    <NuxtPage :page-key="route => route.fullPath" />
  </div>
</template>

O alternativamente:

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

Grupos de Rutas

En algunos casos, es posible que desees agrupar un conjunto de rutas de una manera que no afecte el enrutamiento basado en archivos. Para este propósito, puedes colocar archivos en una carpeta que esté envuelta entre paréntesis - ( y ).

Por ejemplo:

-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue

Esto producirá las páginas /, /about y /contact en tu aplicación. El grupo marketing se ignora para propósitos de la estructura de tu URL.

Metadatos de Página

Es posible que desees definir metadatos para cada ruta en tu aplicación. Puedes hacerlo usando la macro definePageMeta, que funcionará tanto en <script> como en <script setup>:

definePageMeta({
  title: 'Mi página de inicio'
})

Estos datos luego pueden ser accedidos en el resto de tu aplicación desde el objeto route.meta.

const route = useRoute()

console.log(route.meta.title) // Mi página de inicio

Si estás usando rutas anidadas, los metadatos de página de todas estas rutas se fusionarán en un solo objeto. Para más información sobre meta de ruta, consulta los documentos de vue-router.

Al igual que defineEmits o defineProps (ver documentos de Vue), definePageMeta es una macro de compilador. Se compilará y no podrás referenciarlo dentro de tu componente. En su lugar, los metadatos pasados a él se elevarán fuera del componente. Por lo tanto, el objeto de metadatos de la página no puede referenciar el componente. Sin embargo, puede referenciar enlaces importados, así como funciones puras definidas localmente.

import { someData } from '~/utils/example'

function validateIdParam(route) {
  return route.params.id && !isNaN(Number(route.params.id))
}

const title = ref('')

definePageMeta({
  validate: validateIdParam,
  someData,
  title,    // no hagas esto, el ref será elevado fuera del componente
})

Metadatos Especiales

Por supuesto, puedes definir metadatos para tu propio uso en toda tu aplicación. Pero algunos metadatos definidos con definePageMeta tienen un propósito particular:

alias

Puedes definir alias de página. Permiten acceder a la misma página desde diferentes rutas. Puede ser una cadena o un array de cadenas como se define en la documentación de vue-router.

keepalive

Nuxt envolverá automáticamente tu página en el componente <KeepAlive> de Vue si estableces keepalive: true en tu definePageMeta. Esto podría ser útil, por ejemplo, en una ruta padre que tiene rutas hijas dinámicas, si deseas preservar el estado de la página a través de cambios de ruta.

Cuando tu objetivo es preservar el estado para rutas padre usa esta sintaxis: <NuxtPage keepalive />. También puedes establecer props para ser pasados a <KeepAlive> (ver una lista completa).

Puedes establecer un valor predeterminado para esta propiedad en tu nuxt.config.

key

Ver arriba.

layout

Puedes definir el diseño usado para renderizar la ruta. Esto puede ser falso (para deshabilitar cualquier diseño), una cadena o un ref/computed, si deseas hacerlo reactivo de alguna manera. Más sobre diseños.

layoutTransition y pageTransition

Puedes definir propiedades de transición para el componente <transition> que envuelve tus páginas y diseños, o pasar false para deshabilitar el envoltorio <transition> para esa ruta. Puedes ver una lista de opciones que se pueden pasar o leer más sobre cómo funcionan las transiciones.

Puedes establecer valores predeterminados para estas propiedades en tu nuxt.config.

middleware

Puedes definir middleware para aplicar antes de cargar esta página. Se fusionará con todos los demás middleware utilizados en cualquier ruta padre/hija coincidente. Puede ser una cadena, una función (una función middleware anónima/interna siguiendo el patrón de guardia global antes), o un array de cadenas/funciones. Más sobre middleware nombrado.

name

Puedes definir un nombre para la ruta de esta página.

path

Puedes definir un patrón de coincidencia de ruta, si tienes un patrón más complejo que puede expresarse con el nombre del archivo. Consulta los documentos de vue-router para más información.

props

Permite acceder a los params de la ruta como props pasados al componente de la página. Consulta los documentos de vue-router para más información.

Tipado de Metadatos Personalizados

Si agregas metadatos personalizados para tus páginas, es posible que desees hacerlo de una manera segura en cuanto a tipos. Es posible aumentar el tipo del objeto aceptado por definePageMeta:

declare module '#app' {
  interface PageMeta {
    pageType?: string
  }
}

// Siempre es importante asegurarse de importar/exportar algo al aumentar un tipo
export {}

Navegación

Para navegar entre las páginas de tu aplicación, debes usar el componente <NuxtLink>.

Este componente está incluido con Nuxt y por lo tanto no tienes que importarlo como lo haces con otros componentes.

Un enlace simple a la página index.vue en tu carpeta pages:

<template>
  <NuxtLink to="/">Página de inicio</NuxtLink>
</template>

Navegación Programática

Nuxt permite la navegación programática a través del método utilitario navigateTo(). Usando este método utilitario, podrás navegar programáticamente al usuario en tu aplicación. Esto es excelente para tomar entradas del usuario y navegarlo dinámicamente a través de tu aplicación. En este ejemplo, tenemos un método simple llamado navigate() que se llama cuando el usuario envía un formulario de búsqueda.

const name = ref('');
const type = ref(1);

function navigate(){
  return navigateTo({
    path: '/search',
    query: {
      name: name.value,
      type: type.value
    }
  })
}

Páginas Solo para Cliente

Puedes definir una página como solo para cliente dándole un sufijo .client.vue. Ninguno del contenido de esta página se renderizará en el servidor.

Páginas Solo para Servidor

Puedes definir una página como solo para servidor dándole un sufijo .server.vue. Aunque podrás navegar a la página usando la navegación del lado del cliente, controlada por vue-router, se renderizará automáticamente con un componente del servidor, lo que significa que el código necesario para renderizar la página no estará en tu paquete del lado del cliente.

Enrutamiento Personalizado

A medida que tu aplicación crece y se vuelve más compleja, tu enrutamiento puede requerir más flexibilidad. Por esta razón, Nuxt expone directamente el enrutador, las rutas y las opciones del enrutador para personalización de diferentes maneras.

Múltiples Directorios de Páginas

Por defecto, todas tus páginas deben estar en un directorio pages en la raíz de tu proyecto.

Sin embargo, puedes usar Capas de Nuxt para crear agrupaciones de las páginas de tu aplicación:

-| some-app/
---| nuxt.config.ts
---| pages/
-----| app-page.vue
-| nuxt.config.ts

// some-app/nuxt.config.ts
export default defineNuxtConfig({
})

export default defineNuxtConfig({
  extends: ['./some-app'],
})