Keď sme vyberali technológiu pre Modulo CMS, chceli sme niečo, čo bude rýchle, moderné a zároveň dostatočne flexibilné pre rôzne typy projektov. Nuxt 3 bol jasná voľba.

Čo je Nuxt 3?

Nuxt je framework postavený na Vue 3, ktorý rieši všetky "nudné" veci okolo fullstack webového projektu:

  • Server-side rendering (SSR)
  • Statická generácia (SSG)
  • File-based routing
  • Auto-import komponentov a composables
  • API routes zabudované priamo v projekte
  • TypeScript podpora out-of-the-box

Vo svete Nuxt 3 nemusíte konfigurovať webpack, babel, typescript ani routing ručne. Všetko funguje od prvého príkazu.

Rendering modes — prečo na tom záleží

Toto je možno najdôležitejší aspekt moderného web developmentu, o ktorom sa hovorí menej, ako by malo.

CSR (Client-Side Rendering) — stránka sa vyrenderuje v prehliadači. Rýchly prvý byte, pomalé zobrazenie obsahu. Problém pre SEO.

SSR (Server-Side Rendering) — server vyrenderuje HTML a pošle ho prehliadaču. Dobré pre SEO, ale vyžaduje bežiaci server.

SSG (Static Site Generation) — stránky sa vygenerujú pri builde. Ultrarychlé, extrémne jednoduché hostovanie. Obmedzenie: obsah sa aktualizuje len pri novom builde.

Hybrid rendering — každá route má vlastný rendering mode. Toto je to, čo robí Nuxt 3 výnimočným.

V Modulo CMS používame hybridný prístup: verejný web je prevažne staticky generovaný (rýchlosť + SEO), ale API endpointy a admin panel fungujú v SSR mode.

Vue 3 a Composition API

Vue 3 s Composition API zmenilo spôsob, akým píšeme komponenty. Miesto rozsypaných options (data, methods, computed) je logika organizovaná do composables — malých, znovupoužiteľných funkcií.

// composables/useBlogPosts.ts
export function useBlogPosts() {
  const posts = ref<Post[]>([])
  const loading = ref(true)
  
  async function fetchPosts() {
    loading.value = true
    posts.value = await $fetch('/api/blog')
    loading.value = false
  }
  
  return { posts, loading, fetchPosts }
}

Tento composable môžete použiť v ľubovoľnom komponente jedným riadkom: const { posts, loading } = useBlogPosts().

TypeScript všade

Nuxt 3 je napísaný v TypeScript a podporuje ho first-class. To znamená, že typy sa automaticky generujú pre API routes, content collections, env variables aj store.

Pre Modulo CMS to znamená, že keď píšete kód admin panelu, editor vám napovedá presne aké polia má článok, aké role existujú a aké API endpointy sú dostupné.

Prečo nie Next.js alebo iné?

Táto otázka padá vždy. Next.js je skvelý framework — ale je to React. Vuetify (UI knižnica ktorú používame v admin paneli) je Vue-only. Ekosystém, na ktorý sme zvyknutí, je Vue ekosystém.

Okrem toho, Nuxt 3's @nuxt/content — knižnica pre správu Markdown obsahu — je natívna Nuxt knižnica a funguje bezproblémovo. Pre headless blog je toto ideálna kombinácia.

Záver

Nuxt 3 nie je len "ďalší framework". Je to komplexné riešenie, ktoré rieši routing, rendering, TypeScript, auto-import, API a obsah v jednom konzistentnom balíku. Pre projekt ako Modulo CMS — kde admin a verejný web musia spolupracovať, ale byť nezávislé — je to ideálna technológia.

Ak vás zaujíma kód, Modulo CMS bude čoskoro open-source na GitHube.