Learning Path

Vue.js Roadmap

A progressive path to learn Vue.js properly, from core reactivity to structured, production-ready frontend applications.

Foundations

What Vue.js Is

  • Progressive framework mental model
  • When Vue is a good fit
  • Core ecosystem overview

Coming soon

Tooling

Local Setup and Project Bootstrapping

  • Node.js and package manager basics
  • Create a Vite app
  • Understand the project structure

Coming soon

Templates

Template Syntax and Directives

  • Text interpolation
  • v-bind and v-on
  • v-if, v-show, and v-for

Coming soon

Reactivity

Reactivity Fundamentals

  • ref and reactive
  • computed values
  • watch and watchEffect basics

Coming soon

Components

Components, Props, and Events

  • Split UI into reusable units
  • Pass data with props
  • Emit events to parents

Coming soon

Components

Slots and Component Composition

  • Default and named slots
  • Layout composition patterns
  • Build flexible UI APIs

Coming soon

Composition API

setup() and Composables

  • Understand script setup
  • Extract reusable logic
  • Keep business logic isolated

Coming soon

Forms

Forms and v-model

  • Two-way binding
  • Checkbox, select, and custom component bindings
  • Validation flow basics

Coming soon

Routing

Vue Router Essentials

  • Nested routes
  • Dynamic params
  • Navigation guards and route-aware UI

Coming soon

State

State Management with Pinia

  • Store design basics
  • Actions and getters
  • When local state is enough

Coming soon

Data Fetching

Async Data and API Calls

  • Loading and error states
  • Fetch on mount or route change
  • Prevent UI flicker and race conditions

Coming soon

Styling

Styling Strategies

  • Scoped CSS
  • Utility-first styling
  • Design systems and component consistency

Coming soon

Quality

Accessibility and UX

  • Keyboard navigation
  • Semantic HTML
  • Accessible forms and feedback states

Coming soon

Quality

Testing Vue Applications

  • Vitest basics
  • Vue Test Utils
  • Component tests vs integration tests

Coming soon

Performance

Performance and Rendering

  • Use keys correctly
  • Lazy load heavy components
  • Avoid unnecessary watchers and re-renders

Coming soon

SSR

Nuxt and Server Rendering

  • Why move from Vue to Nuxt
  • SSR and SSG basics
  • Shared state and data fetching constraints

Coming soon

Delivery

Build, Deploy, and Monitor

  • Production builds
  • Environment variables
  • Basic observability and error tracking

Coming soon

Production

Production Patterns

  • Auth flows
  • Role-based UI
  • Scaling a frontend codebase over time

Coming soon