Primeros Pasos con Nuxt.js

Si eres un desarrollador de Vue que busca construir aplicaciones listas para producción con un flujo de trabajo moderno, Nuxt 4 te ofrece el camino más rápido hacia adelante. Nuxt se construye sobre Vue 3 con renderizado del lado del servidor, renderizado híbrido, enrutamiento basado en archivos y un modelo de despliegue unificado que funciona en entornos Node, hosts estáticos, serverless y edge.

Este tutorial amigable para principiantes te guía a través de la creación de tu primera aplicación Nuxt 4 utilizando las configuraciones actuales predeterminadas como Vue 3, Vite, TypeScript, composables y Nitro.

¿Qué es Nuxt 4 y Por Qué Deberías Usarlo?

Nuxt 4 es la versión principal actual del framework Nuxt y la opción recomendada para nuevas aplicaciones Vue a finales de 2025. Utiliza Vue 3, Vite y el motor de servidor Nitro para ofrecer una experiencia de desarrollo rápida y una arquitectura de producción flexible.

A diferencia de las aplicaciones Vue simples, Nuxt 4 proporciona SSR de forma predeterminada, gestiona el enrutamiento automáticamente, maneja la obtención de datos tanto en contextos de servidor como de cliente, y viene con una estructura de proyecto predecible y basada en convenciones.

Vue 3 + Vite por Defecto

Nuxt 4 utiliza Vite para su servidor de desarrollo y pipeline de compilación. Esto te proporciona reemplazo de módulos en caliente casi instantáneo, arranques en frío rápidos y paquetes de salida altamente optimizados.

La API de Composición de Vue 3 y el diseño que prioriza TypeScript proporcionan una fuerte inferencia de tipos, mejor organización del código y comportamiento predecible de los componentes.

TypeScript, Sin Configuración Requerida

El soporte para TypeScript está integrado. Nuxt genera automáticamente tipos basados en los directorios de tu proyecto, rutas de API, middleware y componentes. Tu IDE comprende todo tu proyecto desde el momento en que guardas los cambios.

Configurando tu Primer Proyecto Nuxt 4

Instalación con npm create nuxt@latest

Crea un nuevo proyecto usando el moderno CLI de Nuxt 4:

npm create nuxt@latest my-app
cd my-app
npm install
npm run dev

Esto configura un proyecto Nuxt 4 con TypeScript, Vite, Nitro y composables auto-importados listos para usar.

Descripción General de la Estructura de Directorios

Un proyecto Nuxt 4 recién creado incluye:

• pages/ — Enrutamiento basado en archivos
• components/ — Componentes auto-importados
• composables/ — Lógica reutilizable con importaciones automáticas
• server/api/ — Endpoints de servidor impulsados por Nitro
• public/ — Recursos estáticos
• nuxt.config.ts — Configuración que prioriza TypeScript

Esta estructura elimina la sobrecarga de configuración y mantiene todo predecible.

Conceptos Fundamentales: Páginas, Layouts, Composables, Auto-Importaciones

Enrutamiento Basado en Archivos en Nuxt 4

Agrega un archivo Vue dentro de pages/ y Nuxt crea automáticamente una ruta:

<!-- pages/products/[id].vue -->
<script setup lang="ts">
const route = useRoute()
const id = route.params.id
</script>

<template>
  <h1>Producto {{ id }}</h1>
</template>

Los parámetros de ruta dinámicos utilizan corchetes.

Layouts para UI Compartida

Los layouts permiten contenedores compartidos alrededor de las páginas:

<!-- layouts/default.vue -->
<template>
  <AppHeader />
  <main><slot /></main>
  <AppFooter />
</template>

Las páginas usan el layout predeterminado automáticamente. Puedes cambiar layouts usando definePageMeta.

Composables y Auto-Importaciones

Los composables dentro de composables/ se auto-importan en todas partes:

// composables/useCounter.ts
export const useCounter = () => {
  const count = useState('count', () => 0)
  const inc = () => count.value++
  return { count, inc }
}

Sin declaraciones de importación, sin código repetitivo — Nuxt maneja todo.

Obtención de Datos en Nuxt 4

useFetch para Peticiones Conscientes de SSR

useFetch maneja la carga de datos del lado del servidor y la hidratación del cliente:

<script setup lang="ts">
const { data: posts } = await useFetch('/api/posts')
</script>

Esto evita la doble obtención entre servidor y cliente y funciona perfectamente con Nitro.

Rutas de API mediante Nitro

Crea endpoints de servidor en server/api/:

// server/api/posts.get.ts
export default defineEventHandler(async () => {
  const posts = await $fetch('https://jsonplaceholder.typicode.com/posts')
  return posts.slice(0, 5)
})

Nitro optimiza estos endpoints para despliegues Node, estáticos, serverless o edge automáticamente.

useAsyncData para Lógica Personalizada

Si necesitas más control:

<script setup lang="ts">
const { data } = await useAsyncData('posts', () =>
  $fetch('/api/posts', { query: { limit: 5 } })
)
</script>

Gestión de Estado con Pinia

Para el estado a nivel de aplicación, Nuxt 4 utiliza Pinia:

npm install @pinia/nuxt

Actívalo:

export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

Crea un store:

// stores/user.ts
export const useUserStore = defineStore('user', () => {
  const profile = ref(null)
  async function load() {
    profile.value = await $fetch('/api/user')
  }
  return { profile, load }
})

Pinia se integra directamente con las auto-importaciones de Nuxt y el comportamiento SSR.

Modos de Renderizado en Nuxt 4

Renderizado del Lado del Servidor por Defecto

Nuxt 4 renderiza páginas en el servidor para SEO y rendimiento. Puedes ajustar el renderizado por ruta:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { isr: 3600 }
  }
})

Esto habilita aplicaciones híbridas que mezclan SSR, páginas estáticas prerenderizadas y secciones dinámicas solo del cliente.

Generación Estática y Despliegue Híbrido

Genera salida estática si es necesario:

npm run generate

Puedes prerenderizar páginas de marketing, mantener dashboards dinámicos y ejecutar todo a través de Nitro.

Desplegando tu Aplicación Nuxt 4

Compilar para Producción

npm run build

Nuxt genera un directorio .output/ que contiene código de servidor, recursos del cliente y presets para cada plataforma de hosting principal.

Despliegue Agnóstico de Plataforma

Despliega en:

• Servidores Node
• Hosts estáticos
• Plataformas serverless (AWS, Vercel, Netlify)
• Redes edge (Cloudflare Workers, Vercel Edge)

Nitro selecciona el preset correcto automáticamente.

Conclusión

Comenzar con Nuxt.js hoy significa usar Nuxt 4.
Con SSR por defecto, renderizado híbrido, auto-importaciones, composables y Nitro impulsando el despliegue, Nuxt 4 te proporciona todo lo que necesitas para construir aplicaciones Vue rápidas, modernas y mantenibles.

Comienza con:

npm create nuxt@latest

—y ya estarás sobre la base correcta.

Preguntas Frecuentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.