Nuxt Guide
Overview
Opinionated Nuxt SPA setup, tech stack, and architectural decisions.
This guide documents Nuxt conventions and patterns for building SPA applications on this stack. It is intended as a general coding standard — use it as a reference for any Nuxt project following the same architecture decisions.
Stack
| Concern | Choice |
|---|---|
| Rendering | ssr: false — full SPA, no server-side rendering |
| Deployment | Cloudflare Pages via nitro preset: cloudflare-pages |
| UI | Tailwind CSS v4 (latest) + UI library of choice (e.g. DaisyUI, Nuxt UI, shadcn-vue) |
| Icons | Phosphor Icons (nuxt-phosphor-icons) |
| Fonts | @nuxtjs/google-fonts |
| HTTP | $fetch wrapped in a shared $api plugin |
| Auth | JWT (access + refresh) stored in cookies via useCookie |
| State | Vue ref / reactive + Nuxt useState — no Pinia/Vuex |
| Real-time | Socket.IO (client plugin) |
| TypeScript | strict: true throughout |
Key Architectural Decisions
| Decision | Choice | Reason |
|---|---|---|
| No SSR | ssr: false | Deploying as pure SPA to CDN edge |
| API proxying | Nuxt route rules | Avoids CORS; hides real API URL |
| No Pinia | useState + composables | Sufficient for this scale |
| Data fetching | Manual in onMounted | Full control in SPA; no hydration edge cases |
| Auth tokens | Cookies via useCookie | Works with HttpOnly-compatible patterns |
| Validation | Custom useFormHandler | Lightweight, no extra dependency |