Nuxt

En lugar de una aplicación Vue.js convencional , que normalmente requiere que cada ruta se registre manualmente, Nuxt utiliza enrutamiento basado en rutas para registrar automáticamente cada ruta en una aplicación. ^{[ 9 ]}

Las páginas se declaran en la pages/carpeta, donde el nombre del archivo de página se convierte en el nombre de la ruta. Se pueden agregar parámetros dinámicos usando corchetes, y rutas comodín usando tres puntos y corchetes, de forma muy similar a la sintaxis de propagación de matrices de JavaScript . ^{[ 10 ]}

• /pages/about.vue- Partidos /sobre.
• /pages/user/[id].vue- Coincide con todas las rutas directamente bajo /user.
• /pages/posts/[...slug].vue- Coincide con todas las rutas bajo /posts.
• /pages/admin/[[page]].vue- Coincide con /admin además de todas las rutas que se encuentran directamente debajo de ella.

Nuxt importa automáticamente la mayoría de las funciones de la API de composición de Vue y cualquier función auxiliar de las carpetas composables/y utils/. ^{[ 11 ]}

< script setup > // ref se importa automáticamente const count = ref ( 0 ); // useRoute también se importa automáticamente const route = useRoute ( ); </script><template> <span> { { count } } </span> </template>​​​​​​

Nuxt admite diseños compatibles con SSR de forma nativa, lo que permite que páginas similares utilicen las mismas plantillas básicas, como el encabezado y el pie de página. Los diseños se declaran en la layouts/carpeta y funcionan mediante ranuras nativas de Vue.

Para habilitar diseños en un proyecto Nuxt, el punto de entrada de la aplicación app.vuedebe incluir un NuxtLayoutcomponente para alternar entre diseños para cada página. ^{[ 12 ]}

< ! -- Contenido del archivo app.vue de ejemplo -- > <template> <NuxtLayout> < NuxtPage / > </NuxtLayout> </template>

El diseño predeterminado se encuentra en layouts/default.vue, y debe incluir un espacio para el contenido de la página.

<!-- contenido del archivo de diseño de ejemplo --> < plantilla > < CustomNavbar /> < ranura /> < Pie de página personalizado /> </ plantilla >

Una página puede usar un diseño personalizado usando el definePageMetaasistente en una función o bloque de configuración. ^{[ 13 ]}

< script setup > definePageMeta ( { layout : "custom" , }) ; </script><template> < !-- esto ahora ocupará el espacio del diseño personalizado -- > </template>

Nuxt añade soporte para middleware a las aplicaciones, lo que permite que la lógica del servidor se ejecute entre los cambios de navegación. Se admiten archivos de middleware tanto globales como específicos de la página. ^{[ 14 ]}

El middleware se declara en la middleware/carpeta, que exporta una función que recibe como parámetros las rutas actual y anterior. A partir de ahí, se pueden usar funciones auxiliares disponibles globalmente, como abortNavigation y navigateTo, para controlar la navegación. ^{[ 15 ] [ 16 ]}

export default defineNuxtMiddleware (( to , from ) => { // lógica de navegación if ( to . params . id === "0" ) return abortNavigation (); return navigateTo ( `/users/ ${ to . params . id } ` ); });

Nuxt también puede generar rutas y manejadores de API de servidorserver/ , utilizando la carpeta. Cualquier archivo colocado en server/apise convertirá en una ruta de API, y cualquier archivo colocado en server/routesse convertirá en un archivo de ruta, la diferencia radica en la ubicación final del archivo ( server/apiagrega un prefijo api a la ruta). ^{[ 17 ]}

// server/api/hello.ts export default defineEventHandler (( event ) => { return { some : "datos aquí" , }; });

Ahora se puede llamar a esto desde componentes que utilizan el useFetchcomponente componible.

< script setup > const { data } = await useFetch ( '/api/ hello ' ) </script><template> <pre> { { data } } </pre> </template>​​​​​​