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.
4 Days
Contact us for pricing
Prerequisites
The intended audience would be experienced JavaScript developers who are planning to use Vue.Getting Started
Introduction to the Vue EcosystemWhat 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 templatesCore 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 filesUsing < 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 definePropsEmitting 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 slotsScoped 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 ViteDefining 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 defineStoreState, 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 inputsCustom component bindings
Multiple models in a single component
Modifiers such as .lazy, .number, .trim
Advanced Component Patterns
Provide and inject for dependency sharingTeleport for rendering outside component hierarchy
Suspense for async rendering control
Performance and Optimisation
Understanding reactivity costsUsing 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 ComponentsCSS modules and alternatives
Integrating utility-first frameworks like Tailwind
Dynamic styling patterns
Testing Vue Applications
Setting up VitestComponent testing with Vue Test Utils
Testing composables and state logic
Strategies for maintainable test suites
vue.jsJavaScriptWeb DevelopmentModern Web DevelopmentFront End Web DevelopmentFullstack Web Development