Migrando mi portfolio a Nuxt 3

Después de años manteniendo mi portfolio con HTML, CSS y JavaScript vanilla, finalmente he decidido dar el salto a Nuxt 3. Este artículo documenta las razones, el proceso y los resultados de esta migración.

Por qué migrar?

Mantener un sitio vanilla se volvió insostenible. La gestión manual de rutas, la falta de componentes reutilizables y la ausencia de herramientas modernas hacían que cada actualización fuera más tediosa que la anterior. Necesitaba una solución que me permitiera escalar sin sacrificar rendimiento.

Beneficios

• Routing automático: Nuxt genera rutas basadas en la estructura de carpetas
• Renderizado de Markdown: Con módulos como @nuxt/content, puedo escribir blogs en Markdown
• Componentes reutilizables: El sistema de componentes de Vue 3 me permite modularizar todo
• i18n integrado: Soporte nativo para múltiples idiomas sin configuración compleja

El nuevo diseño

Con Nuxt 3, he podido rediseñar el sitio usando componentes Vue y Tailwind CSS. El siguiente ejemplo muestra cómo estructuro los artículos del blog:

<script setup>
const { data: articles } = await useAsyncData('articles', () =>
  queryCollection('blog').order('date', 'DESC').limit(6).all()
)
</script>

<template>
  <article v-for="article in articles" :key="article.id">
    <h2>{{ article.title }}</h2>
    <p>{{ article.description }}</p>
  </article>
</template>

Micro-interacciones

• Transiciones de página con vue-router y definePageMeta
• Animaciones de entrada con useIntersectionObserver
• Navegación persistente sin recarga completa
• Carga diferida de imágenes con nuxt-img

Conclusión

Migrar a Nuxt 3 ha sido una de las mejores decisiones técnicas para mi portfolio. El framework no solo ha simplificado el desarrollo, sino que también ha mejorado el rendimiento, la accesibilidad y la experiencia de usuario. Si estás considerando una migración similar, te animo a dar el paso.