Hvordan jeg gjenbygget min personlige nettside med Nuxt 4 og Firebase

Min gamle nettside var en enkelt statisk HTML-fil. Slik og hvorfor gjenbygget jeg den med Nuxt 4, Tailwind CSS, Firebase Hosting og et fullt tilpasset flerspråklig system for 10 språk.

Den gamle nettsiden

I lang tid var min personlige nettside en enkelt `index.html`-fil. Minimal og rask — men ikke skalerbar. Jeg bestemte meg for en fullstendig gjenbygging.

Hvorfor Nuxt 4

Statisk generering — `nuxt generate` produserer statisk utdata for Firebase Hosting
Filbasert ruting — Artikelsider på `/news/[slug]` fungerer uten konfigurasjon
TypeScript-first — Hele kodebasen er typet
SSR + hydrering — Ideelt for SEO

Stakken

Nuxt 4 med `app/`-katalogstruktur, SSR med statisk generering
Tailwind CSS — Utility-first styling
Firebase Hosting — Globalt CDN, enkle deploys
Tilpasset i18n — Et håndlaget composable med `vue-i18n`
Nitro serverruter — Artikler som lokale JSON-filer

Det flerspråklige systemet

Nettsiden støtter 10 språk. Jeg unngikk bevisst `@nuxtjs/i18n` og skrev et `useI18n()`-composable som leser fra en `locale`-informasjonskapsel.

Artikler som lokal JSON

Hver artikkel er en JSON-fil med et `translations`-objekt — én oppføring per locale med `title`, `summary` og `body` i Markdown.

SEO og forhåndsrendering

En `nitro:config`-hook leser `content/articles/`-katalogen før Vite-bygget og legger til hver `/news/[slug]`-rute i forhåndsrenderingslisten.

Hva er neste

Nettsiden har nå ordentlig ruting, en nyhetsfeed og full flerspråklig støtte.