Nuxt to Astro Migration

A complete migration from Nuxt 3 to Astro 5 for a personal portfolio and blog platform. The migration focused on improving build times, reducing JavaScript bundle size, and simplifying the codebase.

Migration Challenges

Content Management

• Before: Nuxt Content with Vue components
• After: Astro Content Collections with MDX
• Benefit: Type-safe content with Zod schemas

Routing

• Before: Vue Router with file-based routing
• After: Astro file-based routing
• Benefit: Simpler, more intuitive routing structure

Styling

• Before: Nuxt UI Pro with Tailwind CSS v3
• After: Tailwind CSS v4 with @tailwindcss/vite
• Benefit: Faster builds, native CSS features

Deployment

• Before: Cloudflare Pages with Nuxt adapter
• After: Cloudflare Pages with Astro adapter
• Issue: Had to manage D1/KV/R2 bindings separately

Performance Improvements

• Build Time: 45s → 12s (73% faster)
• Bundle Size: 180KB → 45KB (75% smaller)
• Time to Interactive: 4.2s → 2.1s (50% faster)
• Lighthouse Score: 89 → 97 (9% improvement)

Lessons Learned

1. Content collections are significantly more type-safe than Nuxt Content
2. Astro’s partial hydration reduces JavaScript overhead
3. Migration requires careful handling of Cloudflare bindings
4. MDX provides better component integration than Vue in markdown
5. Astro’s build process is faster for content-heavy sites

Outcome

The migration was successful, resulting in a faster, more maintainable codebase with better developer experience and improved performance metrics.