Vue.js — Vue.js Stack Roadmap
Building user interfaces with the progressive Vue framework
Steps in Vue.js
- Vue Fundamentals & Vite Setup — intermediate · Creating a Vue project with Vite, project structure and the root app instance
- Single File Components (SFC) — intermediate · Structuring a component with template, script and style blocks in a .vue file
- Template Syntax & Directives — intermediate · v-bind, v-if/v-else, v-show, v-for and other built-in directives
- Reactivity Fundamentals — intermediate · ref, reactive and how Vue's reactivity system tracks changes
- Components & Props — intermediate · Creating reusable components and passing data down via props
- Emitting Events & Component Communication — intermediate · Emitting custom events with $emit and communicating between parent and child components
- Composition API vs Options API — intermediate · setup(), <script setup>, and comparing Vue's two component API styles
- Lifecycle Hooks — intermediate · onMounted, onUpdated, onUnmounted and the component lifecycle
- Computed Properties & Watchers — intermediate · Deriving reactive values with computed and reacting to changes with watch/watchEffect
- Forms & v-model Bindings — intermediate · Two-way data binding on form inputs with v-model, including custom components
- Vue Router — intermediate · Client-side routing, route params, nested routes and navigation guards
- Pinia (State Management) — advanced · Managing global state with Pinia stores
- Composables (Reusable Logic) — advanced · Extracting and reusing reactive logic into composable functions
- Slots & Scoped Slots — intermediate · Default slots, named slots and scoped slots for flexible component composition
- Component Styling — intermediate · Scoped CSS, CSS Modules and using Tailwind inside Vue SFCs
- Fetching Data (Axios/Fetch) — intermediate · Calling APIs from Vue components and handling loading/error states
- Performance Optimization — advanced · v-memo, lazy-loaded components, keep-alive and avoiding unnecessary re-renders
- Mini Project: Multi-Page Vue App — advanced · Build a multi-page Vue app consuming a public API with routing and state
Part of
- Vue.js Stack roadmap — the full learning path