Nuxt integra Vue 3, la nueva versión principal de Vue que permite nuevos patrones para los usuarios de Nuxt.

Nuxt siempre ha utilizado Vue como un framework frontend.

Elegimos construir Nuxt sobre Vue por estas razones:

• El modelo de reactividad de Vue, donde un cambio en los datos automáticamente desencadena un cambio en la interfaz.
• La plantilla basada en componentes, mientras mantiene HTML como el lenguaje común de la web, permite patrones intuitivos para mantener tu interfaz consistente, pero poderosa.
• Desde proyectos pequeños hasta grandes aplicaciones web, Vue sigue funcionando bien a escala para asegurar que tu aplicación siga entregando valor a tus usuarios.

Vue con Nuxt

Componentes de Archivo Único

Los componentes de archivo único de Vue (SFC o archivos *.vue) encapsulan el marcado (<template>), la lógica (<script>) y el estilo (<style>) de un componente Vue. Nuxt proporciona una experiencia sin configuración para los SFCs con Hot Module Replacement que ofrece una experiencia de desarrollo fluida.

Auto-importaciones

Cada componente Vue creado en el directorio components/ de un proyecto Nuxt estará disponible en tu proyecto sin tener que importarlo. Si un componente no se utiliza en ningún lugar, el código de producción no lo incluirá.

Vue Router

La mayoría de las aplicaciones necesitan múltiples páginas y una forma de navegar entre ellas. Esto se llama enrutamiento. Nuxt utiliza un directorio pages/ y convenciones de nomenclatura para crear directamente rutas mapeadas a tus archivos usando la biblioteca oficial Vue Router.

Diferencias con Nuxt 2 / Vue 2

Nuxt 3+ está basado en Vue 3. La nueva versión principal de Vue introduce varios cambios de los que Nuxt se beneficia:

• Mejor rendimiento
• API de Composición
• Soporte para TypeScript

Renderizado Más Rápido

El DOM Virtual de Vue (VDOM) ha sido reescrito desde cero y permite un mejor rendimiento de renderizado. Además, al trabajar con Componentes de Archivo Único compilados, el compilador de Vue puede optimizarlos aún más en tiempo de compilación separando el marcado estático y dinámico.

Esto resulta en un renderizado inicial más rápido (creación de componentes) y actualizaciones, y un menor uso de memoria. En Nuxt 3, permite un renderizado del lado del servidor más rápido también.

Paquete Más Pequeño

Con Vue 3 y Nuxt 3, se ha puesto un enfoque en la reducción del tamaño del paquete. Con la versión 3, la mayoría de las funcionalidades de Vue, incluidas las directivas de plantillas y los componentes integrados, son eliminables. Tu paquete de producción no los incluirá si no los usas.

De esta manera, una aplicación mínima de Vue 3 puede reducirse a 12 kb comprimidos.

API de Composición

La única forma de proporcionar datos y lógica a los componentes en Vue 2 era a través de la API de Opciones, que te permite devolver datos y métodos a una plantilla con propiedades predefinidas como data y methods:

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment(){
      this.count++
    }
  }
}

La API de Composición introducida en Vue 3 no es un reemplazo de la API de Opciones, pero permite una mejor reutilización de la lógica en toda una aplicación, y es una forma más natural de agrupar el código por preocupación en componentes complejos.

Usada con la palabra clave setup en la definición de <script>, aquí está el componente anterior reescrito con la API de Composición y las APIs de Reactividad auto-importadas de Nuxt 3:

const count = ref(0)
const increment = () => count.value++

El objetivo de Nuxt es proporcionar una gran experiencia de desarrollo alrededor de la API de Composición.

• Usa funciones de Reactividad auto-importadas de Vue y composables integrados de Nuxt composables integrados.
• Escribe tus propias funciones reutilizables auto-importadas en el directorio composables/.

Soporte para TypeScript

Tanto Vue 3 como Nuxt 3+ están escritos en TypeScript. Una base de código completamente tipada previene errores y documenta el uso de las APIs. Esto no significa que tengas que escribir tu aplicación en TypeScript para aprovecharlo. Con Nuxt 3, puedes optar por ello renombrando tu archivo de .js a .ts, o añadiendo <script setup lang="ts"> en un componente.