Como reconstruí o meu site pessoal com Nuxt 4 e Firebase
O meu antigo site era um único ficheiro HTML estático. Aqui está como e porquê o reconstruí com Nuxt 4, Tailwind CSS, Firebase Hosting e um sistema multilingue personalizado cobrindo 10 idiomas.
O site antigo
Durante muito tempo, o meu site pessoal foi um único ficheiro `index.html`. Mínimo e rápido — mas não escalável. Decidi fazer uma reconstrução completa.
Porquê Nuxt 4
- Geração estática — `nuxt generate` produz saída estática compatível com Firebase Hosting
- Roteamento baseado em ficheiros — Páginas de artigos em `/news/[slug]` funcionam sem configuração
- TypeScript-first — Toda a base de código está tipada
- SSR + hidratação — Ideal para SEO
O stack
- Nuxt 4 com estrutura de diretório `app/`, SSR com geração estática
- Tailwind CSS — Estilos utility-first
- Firebase Hosting — CDN global, deploys simples
- i18n personalizado — Um composable feito à mão com `vue-i18n`
- Rotas de servidor Nitro — Artigos como ficheiros JSON locais
O sistema multilingue
O site suporta 10 idiomas. Evitei deliberadamente `@nuxtjs/i18n` e escrevi um composable `useI18n()` que lê a partir de um cookie `locale`.
Artigos como JSON local
Cada artigo é um ficheiro JSON com um objeto `translations` — uma entrada por locale com `title`, `summary` e `body` em Markdown.
SEO e pré-renderização
Um hook `nitro:config` lê o diretório `content/articles/` antes do build do Vite e adiciona cada rota `/news/[slug]` à lista de pré-renderização.
O que vem a seguir
O site tem agora roteamento adequado, um feed de notícias e suporte multilingue completo.