Front-end web development
Vue.js 3: reactive web applications
Build reactive interfaces with Vue 3: components, routing, Pinia and the Composition API.
- Duration
- 21 h · 3 days
- Level
- Intermediate
- Format
- On site · Remote · Blended
- Max. group size
- 12 participants
Overview
This program teaches how to develop single-page applications with Vue.js 3. Participants create a modern project, split the interface into components, handle navigation with Vue Router and shared state with Pinia. They discover the Composition API, compare it with the Options API and become familiar with unit testing of components.
Who this program is for
- Front-end web developers
- PHP or back-end developers moving to a modern interface
- Teams evaluating Vue.js
Prerequisites
- Very good command of HTML5, CSS3 and JavaScript
Learning objectives
- Create a Vue 3 project with Vite
- Write components, props, slots and custom events
- Understand reactivity and the lifecycle
- Configure navigation with Vue Router
- Manage shared state with Pinia
- Use the Composition API and composables
- Test components with Vitest
Detailed curriculum
6 modules · 21 h · 3 days
Day 1
First steps with Vue 3
50% theory · 50% practice
- Philosophy of Vue and comparison with alternatives
- Creating a project with Vite
- Template, interpolation and directives
- Reactivity: ref and reactive
- Handling DOM events
Components and communication
30% theory · 70% practice
- Single-file components
- Props and validation
- Custom events
- Slots
- Lifecycle and input validation
🛠 Hands-on workshops
Interface in components1.5 h
Split a dashboard interface into components.
✅ Deliverable : A modular dashboard
Day 2
Computed properties, templates and transitions
50% theory · 50% practice
- Computed, watchers and methods
- Conditional rendering and lists
- Forms and v-model
- Transitions and animations
- Readability best practices
Navigation with Vue Router
30% theory · 70% practice
- Routes, links and parameters
- Nested routes and navigation guards
- Lazy loading of pages
- Transitions between screens
- Handling navigation errors
🛠 Hands-on workshops
Multi-page application1.5 h
Add routes and access guards to the project.
✅ Deliverable : An application with protected pages
Day 3
Shared state with Pinia and the Composition API
30% theory · 70% practice
- Pinia stores: state, getters, actions
- Asynchronous actions and API calls
- Composition API and script setup
- Reusable composables
- Options API or Composition API: how to choose
🛠 Hands-on workshops
Store and composables2 h
Set up a store and two composables for the application.
✅ Deliverable : A tested store and composables
Testing and finalization
50% theory · 50% practice
- Unit testing with Vitest and Vue Test Utils
- Testing a component, a store and routing
- Production build
- Next steps: TypeScript, server-side rendering
- Review and upskilling plan
Tools and technologies
JavaScriptNode.jsVisual Studio CodeVue.js
Teaching methods
- Alternating short lectures and hands-on work
- Live demonstrations by the trainer
- Capstone project built throughout the modules
- Group corrections and discussion of best practices
Assessment
- Hands-on exercises corrected in each module
- Mini-project completed at the end of the course
- Knowledge-check quiz
Required equipment
- A computer with an internet connection
- A code editor and Node.js installed
Resources provided
- Course materials and repository of corrected exercises
Career outcomes
- A complete Vue application with navigation and state
- A good understanding of the Composition API
- A project ready to serve as a base