About the course
Vue.js 3 is a progressive, performant, and versatile JavaScript framework for building modern, interactive, and scalable frontend applications. It represents a significant evolution from Vue 2, bringing substantial improvements in performance, a reduced bundle size, enhanced TypeScript integration, and the introduction of the powerful Composition API. This 4-day intensive hands-on training course provides a comprehensive deep dive into Vue 3, equipping developers with the knowledge and practical skills to build professional, production-ready web applications using the latest version of the framework and its ecosystem.
The course begins by introducing Vue 3's architecture and core concepts, guiding participants through setting up a modern Vue 3 project using recommended build tools like Vite and mastering fundamental template syntax, directives, and effective event handling. A significant focus is placed on understanding and effectively utilising Vue 3's highly performant and flexible Reactivity System, exploring core concepts such as ref, reactive, computed, watch, and watchEffect. Participants will gain a thorough understanding of Components, learning how to build reusable UI elements using both the familiar Options API and the powerful new Composition API (including the streamlined script setup syntax), effectively manage component communication using props and emitted events, and utilise slots for content projection.
Building on these foundations, the course covers essential aspects of modern single-page application development, including handling Forms and two-way data binding, implementing robust client-side Routing with Vue Router 4, and managing application state efficiently with Pinia, the official state management library. Participants will learn to write effective Unit Tests for Vue 3 components and Pinia stores using @vue/test-utils. The training also explores key parts of the Vue 3 ecosystem, including TypeScript integration, an overview of Nuxt 3, using Plugins, understanding communication patterns, handling transitions, error handling, and applying best practices for building maintainable and performant applications ready for deployment. Through extensive coding examples and hands-on labs, attendees will gain practical experience applying Vue 3 concepts in realistic development scenarios throughout the four days.
Instructor-led online and in-house face-to-face options are available - as part of a wider customised training programme, or as a standalone workshop, on-site at your offices or at one of many flexible meeting spaces in the UK and around the World.
-
- Understand the architecture, key features, and performance benefits of Vue.js 3.
- Set up and configure a modern Vue 3 project using recommended build tools like Vite.
- Learn Vue 3 template syntax, built-in directives, and effective event handling.
- Understand and effectively utilise the Vue 3 Reactivity System using ref, reactive, computed, watch, and watchEffect.
- Build reusable components using both the Vue 3 Options API and the Composition API (including script setup).
- Effectively manage component communication using props, emitted events, and slots, and understand dynamic and asynchronous components.
- Handle forms and implement two-way data binding with v-model on native elements and custom components.
- Implement client-side routing using Vue Router 4, including defining routes, using navigation guards, and implementing lazy loading.
- Manage application state efficiently using Pinia, including defining stores, state, getters, and actions.
- Write effective unit tests for Vue 3 components and Pinia stores using @vue/test-utils and understand basic mocking techniques.
- Integrate TypeScript into Vue 3 projects for enhanced type safety and developer experience.
- Understand key aspects of the Vue 3 ecosystem, including an overview of Nuxt 3 and using plugins.
- Apply best practices for building maintainable, performant, and scalable Vue 3 applications.
- Implement basic error handling and understand deployment concepts for Vue 3 applications.
-
This 4-day intensive hands-on training course is designed for Frontend Developers and JavaScript Developers who want to learn how to build modern, performant, and maintainable web applications using Vue.js 3 and its ecosystem. It is ideal for:
Developers new to Vue.js wanting a comprehensive introduction to Vue 3.
Developers experienced with Vue 2 looking to transition to Vue 3 and leverage its new features and the Composition API.
Frontend Developers seeking to add Vue 3 to their skill set for professional web development.
Teams adopting or standardising on Vue 3 for their current or future web development projects.
Developers interested in building Single Page Applications (SPAs) or server-rendered Vue applications.
-
Participants should have attended our Modern JavaScript training course or have equivalent experience:
A solid understanding of JavaScript, including modern features (ES6+ syntax, e.g., arrow functions, modules, promises).
Familiarity with HTML and CSS.
Experience using a command-line interface (CLI).
Basic understanding of frontend development concepts.
-
This Vue.js course is available for private / custom delivery for your team - as an in-house face-to-face workshop at your location of choice, or as online instructor-led training via MS Teams (or your own preferred platform).
Get in touch to find out how we can deliver tailored training which focuses on your project requirements and learning goals.
-
Introduction to Vue.js 3
What is Vue.js 3? Key features and improvements over Vue 2.
The benefits of using Vue 3 for modern web development (performance, bundle size, DX).
Vue 3 Architecture overview.
Setting up a modern Vue 3 project using Vite.
Project structure and configuration overview.
Hands-on Lab: Set up a new Vue 3 project with Vite and explore the default structure.
Vue 3 Template Syntax and Directives
Mastering the template syntax: Text interpolation, Raw HTML, Attribute bindings (v-bind).
Boolean attributes.
Dynamically binding multiple attributes.
Using built-in directives (v-if, v-else, v-show, v-for, v-on, v-bind, v-model).
Conditional rendering (v-if, v-else-if, v-else, v-show).
List rendering (v-for) with arrays and objects, understanding the key attribute.
Event handling (v-on, @ shorthand): Listening to DOM events.
Event modifiers (.stop, .prevent, .capture, .self, .once, .passive).
Hands-on Lab: Practice template syntax, directives, conditional rendering, list rendering, and event handling.
Introduction to Components
What are Components? Building reusable UI elements.
Defining and registering components (Global vs Local).
Using components in templates.
Introduction to Single File Components (SFCs): <template>, <script>, <style>.
Building components using the Options API (data, methods, computed, watch).
Hands-on Lab: Create and use simple components using the Options API and SFCs.
Vue 3 Reactivity System
Understanding Vue 3's reactive system (Proxy-based).
Core reactivity APIs: ref() for primitive values and single values.
reactive() for objects and arrays.
When to use ref vs reactive.
Unwrapping refs in templates and <script setup>.
Hands-on Lab: Experiment with ref and reactive to create reactive data.
Computed Properties and Watchers
Computed Properties (computed()): Creating derived reactive data.
Getter and Setter computed properties.
Performance advantages of computed properties.
Watchers (watch()): Reacting to changes in specific reactive data.
Watching different data sources (refs, reactive objects, getters, arrays).
Deep watchers.
watchEffect(): Automatically tracking dependencies and running side effects.
Comparing watch and watchEffect.
Hands-on Lab: Implement computed properties and various types of watchers.
Component Communication (Props and Events)
Props: Passing data from parent to child components (v-bind).
Defining props with validation (props option).
One-way data flow principle.
Emitting Custom Events: Sending messages from child to parent components ($emit, defineEmits in Composition API).
Declaring emitted events (emits option).
Passing arguments with events.
Hands-on Lab: Implement component communication using props and custom events.
Component Slots
What are Slots? Passing content to components (<slot>).
Default slots.
Named slots (<slot name="...">, v-slot directive).
Scoped slots (passing data from child to parent slot content).
Hands-on Lab: Utilise default, named, and scoped slots in components.
Forms and v-model
Handling user input with form controls (<input>, <textarea>, <select>).
v-model: Implementing two-way data binding.
v-model with different input types (text, checkbox, radio, select).
v-model modifiers (.lazy, .number, .trim).
v-model on Custom Components (modelValue prop and update:modelValue event).
Multiple v-model bindings on a single component.
Hands-on Lab: Build forms using v-model on native elements and custom components.
Advanced Component Concepts and Composition API
Component Lifecycle Hooks (Options API hooks vs. Composition API lifecycle hooks).
Introduction to the Composition API (setup() function).
Using Composition API with reactive state (ref, reactive) and computed properties/watchers within setup.
The <script setup> syntax: A more concise way to use the Composition API.
Creating and using Composables: Reusable pieces of reactive logic.
Dynamic components (<component :is="...">).
Asynchronous components and Lazy Loading components.
Hands-on Lab: Refactor components to use the Composition API and script setup. Create and use a simple composable. Implement dynamic components.
Introduction to Vue Router 4
What is Client-Side Routing? Building Single Page Applications (SPAs).
Installing and configuring Vue Router 4.
Defining routes and mapping them to components.
Using <router-link> for navigation.
Displaying routed components with <router-view>.
Route parameters, query, and hash.
Hands-on Lab: Set up Vue Router 4 and create basic routes with navigation.
Navigation Guards
Global navigation guards (beforeEach, beforeResolve, afterEach).
Per-route guards (beforeEnter).
In-component guards (beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave).
Using navigation guards for authentication, authorization, and data fetching.
Hands-on Lab: Implement different types of navigation guards.
Lazy Loading Routes
Code splitting routes for better performance.
Implementing lazy loading of route components.
Hands-on Lab: Configure routes for lazy loading.
State Management with Pinia
The need for state management in larger applications.
Introduction to Pinia: The official Vue 3 state management library.
Pinia vs. Vuex (brief comparison).
Installing and configuring Pinia.
Defining a Pinia store (defineStore).
State in Pinia: Defining and accessing reactive state.
Getters in Pinia: Derived state.
Hands-on Lab: Set up Pinia and create a simple store with state and getters.
Pinia Actions and Usage
Actions in Pinia: Handling business logic and asynchronous operations (Mutations are gone!).
Calling actions from components.
Using Pinia stores in components (Options API and Composition API).
Destructuring Pinia stores with storeToRefs.
Hands-on Lab: Implement actions in a Pinia store and use the store in components.
Unit Testing Vue 3 Applications
The importance of unit testing.
Introduction to @vue/test-utils for Vue 3.
Setting up a testing environment (e.g., with Vitest or Jest).
Testing single file components: Mounting components (mount vs shallowMount).
Finding elements and interacting with the component.
Making assertions about component output and behaviour.
Testing emitted events.
Testing Pinia stores.
Mocking dependencies for isolated tests.
Hands-on Lab: Write unit tests for a Vue 3 component and a Pinia store.
Ecosystem and Advanced Topics
TypeScript Integration: Using TypeScript with Vue 3 (Composition API and Options API). Typing props, events, state, and components.
Nuxt 3 Overview: Introduction to Nuxt 3 as an opinionated framework for Server-Side Rendering (SSR), Static Site Generation (SSG), and more, built on Vue 3. Key features and benefits.
Plugins: Creating and using Vue plugins.
Inter-component Communication Strategies: Reviewing different patterns (props/events, provide/inject, Pinia) and when to use them (replacing the Vue 2 Event Bus pattern).
Transitions and Animations: Basic approaches to adding transitions and animations to Vue elements.
Error Handling: Strategies for handling errors in Vue applications.
Deployment: Overview of common deployment strategies for Vue 3 applications (SPAs, SSR).
Best Practices: Tips for writing maintainable, performant, and scalable Vue 3 code.
Review of concepts and Q&A.
Hands-on: Integrate TypeScript into the project. Explore basic Nuxt 3 structure (if time permits).
-
Vue.js 3 Documentation: The official and comprehensive documentation for Vue 3, including the API reference and style guide.
Vue.js 3 API Reference: Detailed reference for all Vue 3 APIs, useful during development.
Pinia Documentation: The official documentation for Pinia, the recommended state management library for Vue 3.
Vue Router 4 Documentation: The official documentation for client-side routing in Vue applications.
@vue/test-utils Documentation: The official unit testing utility library for Vue 3 components.
Vite Documentation: Documentation for the lightning-fast build tool recommended for modern Vue 3 projects.
Nuxt 3 Documentation: Documentation for the full-stack framework built on Vue 3.
TypeScript Documentation: Official documentation for the TypeScript language.
Trusted by
