Nuxt Architecture Design Guide
This guide explains the rendering strategy, data layer, routing boundaries, caching, and operating model to consider when designing a Nuxt-based frontend architecture.
Vue Architecture
This group clusters posts that are best read together inside the Frontend category, so the learning path feels more intentional.
This group currently contains 12 posts.
Start Here
Best first read in this group
Nuxt Architecture Design Guide
This guide explains the rendering strategy, data layer, routing boundaries, caching, and operating model to consider when designing a Nuxt-based frontend architecture.
Group Archive
All posts in this group
Vue.js Architecture Design Guide
This guide explains how to design a Vue.js project as a maintainable frontend system rather than just a collection of components, covering state boundaries, routing, data flow, folder structure, performance, and collaboration.
Vue Component Design Principles Guide
This guide covers component responsibility, reuse boundaries, props and events design, and slot strategy in Vue applications from a practical engineering perspective.
Vue + SPA Architecture Guide
This guide explains how to design a Vue-based SPA as a long-lived single-page application rather than just a quick build, covering routing, state, data fetching, caching, deployment, and performance.
Vue + SSR Architecture Guide
This guide explains when to adopt SSR in Vue, how it differs from SPA, and how to think about data loading, caching, hydration, and deployment from a practical engineering perspective.
Vue State Management Strategy Guide
This guide explains how to distinguish and design Pinia state, local state, and server state in Vue applications from a practical engineering perspective.
Vue Router 4 Design Guide
This guide looks at Vue Router 4 not just as a routing tool, but as a way to design page transitions and authorization flow. It covers nested routes, guards, lazy loading, and URL design principles.
Vue 3 Composition API Complete Guide
This practical guide goes beyond Composition API syntax to cover logic composition, composable design, the boundary between ref and reactive, and maintainability in real projects.
Pinia State Management Design Guide
This guide covers the key design decisions when adopting Pinia in Vue 3, including store boundaries, separating server and client state, action design, and practical TypeScript usage.
Vue 3 Component Communication Design Guide
This guide explains when to use props, emit, provide/inject, and stores in Vue 3. It focuses less on syntax and more on how to design data flow and component boundaries.
Vue 3 + TypeScript Design Guide
This guide explains how to apply TypeScript practically in Vue 3 projects, including defineProps, defineEmits, typing ref/reactive, modeling composables, and avoiding over-generalization.
Vite + Vue 3 Project Design Guide
This guide covers the key decisions for building a fast development environment with Vite and Vue 3, including aliases, environment variables, proxies, build strategy, developer experience, and deployment stability.