How I rebuilt my personal site with Nuxt 4 and Firebase

The old site

For a long time, my personal site was a single index.html file. Minimal, fast, and easy to maintain. It did the job — but as I started building more projects and wanted a proper news feed, it wasn't going to scale.

I decided to do a full rebuild.

Why Nuxt 4

I chose Nuxt 4 for a few specific reasons:

• Static generation — nuxt generate produces a fully static output compatible with Firebase Hosting
• File-based routing — Article pages at /news/[slug] just work with zero configuration
• TypeScript-first — The entire codebase is typed, from server routes to composables
• SSR + hydration — Pages are pre-rendered on the server and hydrated on the client, which is ideal for SEO

The stack

• Nuxt 4 (compatibility version 4) — App directory structure, SSR with static generation
• Tailwind CSS — Utility-first styling with no component library overhead
• Firebase Hosting — Global CDN, near-zero config deploys with firebase deploy
• Custom i18n — A hand-rolled composable using vue-i18n directly, no module needed
• Nitro server routes — Articles are stored as local JSON files and served via server/api/ endpoints

The multilingual system

The site supports 10 languages: English, French, German, Spanish, Italian, Dutch, Norwegian, Polish, Portuguese, and Turkish.

I deliberately avoided @nuxtjs/i18n. For a personal site with this scope, the module brings too much weight and complexity. Instead, I wrote a useI18n() composable that wraps vue-i18n directly and reads from a locale cookie. Switching languages is instant and doesn't require a page reload.

Articles as local JSON

Each article is a single JSON file in content/articles/. The schema is simple:

• slug — the URL key
• date — ISO date string
• tags — array of strings
• url — optional external link
• translations — an object with one entry per locale, each containing title, summary, and body (Markdown text)

This means every article is fully translated at the content layer. The page component just picks the right translation based on the current locale — no external service, no API call.

SEO and prerendering

For each article to be properly indexed, it needs its own static HTML file. A nitro:config hook reads the content/articles/ directory before the Vite build and adds every /news/[slug] route to the prerender list.

Each article page uses useSeoMeta() for meta tags and useHead() for canonical + hreflang links across all 10 locales. Google can index every article in every language from a single URL.

What I'd do differently

The main thing I underestimated was hydration. With SSR, any mismatch between what the server renders and what the client expects causes Vue hydration warnings. The most common culprit: conditional rendering based on client-only state (like a cookie or localStorage). The fix is wrapping those blocks in <ClientOnly> or initializing state carefully from the server.

What's next

The rebuild is complete. The site now has proper routing, a news feed, and full multilingual support. I plan to keep publishing here — new Reloadium launches, product thinking, and the occasional technical deep-dive.