Vue.js Developer
Course Description
This course provides a comprehensive introduction to modern Vue development using the current Vue 3 ecosystem. It is designed for developers who want to build scalable, maintainable front-end applications using Vue’s Composition API, <script setup> syntax and the broader tooling landscape built around Vite. Starting with the fundamentals of Vue’s reactivity system and template syntax, the course gradually builds toward more advanced topics such as component architecture, state management with Pinia, routing and performance optimisation. Along the way, it emphasizes practical patterns, reusable logic through composables and the conventions that define modern Vue applications, giving you a clear and up-to-date mental model of how Vue is used in real-world projects today.
Duration: 4 days
Prerequisites
The intended audience would be experienced JavaScript developers who are planning to use Vue.
Getting Started
Introduction to the Vue Ecosystem What Vue is (progressive framework, component-based UI) Vue vs libraries (comparison to React conceptually) Overview of the modern stack: Node.js Vue 3 Vite Single File Components
Foundations of Vue Reactivity
Understanding ref() and reactive() How Vue tracks dependencies and updates the DOM Using computed() for derived state watch() vs watchEffect() and when to use each Ref unwrapping and reactivity caveats
Template Syntax and Rendering
Interpolation and expressions in templates Core directives: v-bind, v-on, v-if, v-for, v-model Dynamic class and style bindings Conditional and list rendering patterns
Single File Components and <script setup>
Structure of .vue files Using < script setup > as the default component format Top-level bindings and template exposure Organizing component logic effectively
Component Communication: Props and Events
Defining props with defineProps Emitting events with defineEmits One-way data flow principles Using v-model in components (modelValue, update:modelValue) Multiple v-model bindings Transitions and animations
Slots and Component Composition
Default and named slots Scoped slots and passing data to slots Building flexible and reusable component APIs
Composables and Logic Reuse
Creating and structuring composables (useX patterns) Sharing reactive state across components Encapsulating side effects and logic Lifecycle usage within composables
Routing with Vue Router
Setting up Vue Router with Vite Defining routes and route components Dynamic and nested routes Navigation guards and route-based logic Lazy loading route components
State Management with Pinia
Creating stores with defineStore State, getters, and actions Setup stores vs options stores Using stores in components and composables Persistence and modular store patterns
Async Data and Side Effects
Fetching data inside setup() Using composables for API calls Managing loading and error states Basic patterns for caching and reuse
Forms and Advanced v-model Usage
Two-way binding with native inputs Custom component bindings Multiple models in a single component Modifiers such as .lazy, .number, .trim
Advanced Component Patterns
Provide and inject for dependency sharing Teleport for rendering outside component hierarchy Suspense for async rendering control
Performance and Optimisation
Understanding reactivity costs Using shallowRef and markRaw Avoiding unnecessary watchers and re-renders Code-splitting and lazy component loading
Tooling and Developer Experience
Project setup with Vite (create-vue) Development workflow and hot module replacement Environment variables and build configuration Using Vue DevTools for debugging
Styling Approaches in Vue
Scoped CSS in Single File Components CSS modules and alternatives Integrating utility-first frameworks like Tailwind Dynamic styling patterns
Testing Vue Applications
Setting up Vitest Component testing with Vue Test Utils Testing composables and state logic Strategies for maintainable test suites