Vue.js Course: Build Applications with Vue 3
Vue.js is an intermediate-level course of 5 lessons (about 1 h 31 min), with 20 exercises and 15 quiz questions. Prerequisites: Asynchronous JavaScript (Promises, fetch, APIs). Exercises run in the browser, with nothing to install.
- Front-end
- Intermediate
- 5 lessons
- 1 h 31 min
- 20 exercises
- Exercises run in the browser
The course in brief
This course teaches you to build a modern Vue 3 application with the Composition API and <script setup>. You write components, master reactivity (ref, computed, watch), make components communicate through props, events, v-model and slots, handle navigation with Vue Router and shared state with Pinia, then test with Vitest. The code exercises focus on component logic, which is run and checked automatically; components are built in hands-on tasks.
What you will be able to do
- Write single-file components with <script setup> and template syntax
- Use ref, reactive, computed, watch and lifecycle hooks without losing reactivity
- Make components communicate with props, events, defineModel, slots and provide / inject
- Configure Vue Router: dynamic routes, lazy loading, not-found page and guards
- Manage shared state with Pinia and storeToRefs, with defensive persistence
- Test logic, stores and components with Vitest and Vue Test Utils
Syllabus: 5 lessons
- Create a Vue project and write a single-file component with <script setup>
- Use interpolation and the v-bind, v-on, v-if, v-show and v-for directives
- Extract display logic into testable pure functions
Single-file components (SFC)Template syntaxDirectives v-if, v-for, v-bind, v-on
- 02
Reactivity and the Composition API
- Choose between ref and reactive and avoid losing reactivity
- Derive values with computed and react to changes with watch
- Write a reusable composable and use lifecycle hooks
Reactivity (ref, reactive)computed, watch and watchEffectComposablesLifecycle hooks
- 03
Props, Events, v-model and Slots
- Declare and validate props with defineProps and default values
- Emit events with defineEmits and create a component v-model with defineModel
- Compose components with slots and share data with provide / inject
PropsEmitted eventsv-model on a componentSlots and provide / inject
- 04
Navigation with Vue Router
- Declare routes, dynamic parameters and a not-found page
- Navigate with RouterLink, useRoute and useRouter
- Protect pages with navigation guards and lazy-load pages
- 05
Shared State with Pinia and Testing
- Create a Pinia store with state, getters and actions
- Use a store in a component without losing reactivity (storeToRefs)
- Test logic, a store and a component with Vitest and Vue Test Utils
Pinia storesstoreToRefsTesting with Vitest and Vue Test Utils
Final project
Click and Collect Ordering App with Vue 3
Build the application of a fictional grocery store that lets users browse a catalog, fill a cart and choose a pickup slot. The app uses Vue 3 with <script setup>, Vue Router (catalog, product page, cart, protected account, not-found page) and Pinia (persistent cart, session). The data comes from a local JSON file or a small simulated API.
Deliverables
- A create-vue project that starts with npm run dev
- Reusable components (CarteProduit, SelecteurQuantite with defineModel, Carte with slots)
- A router with named routes, dynamic product page, lazy-loaded pages and a login guard
- Pinia cart and session stores, with the cart restored defensively
- Vitest tests for the pure logic, the stores and at least one component
Assessment criteria
- Correct reactivity (no modified props, no destructuring without storeToRefs)
- Derived values in computed and side effects in watch
- Stable keys in v-for loops and components decoupled through props, events and slots
- Complete navigation: converted parameters, not-found page, redirect after login
- Relevant tests that pass with npx vitest run
Frequently asked questions
What level of JavaScript do I need for this course?
You need to be comfortable with modern JavaScript: arrow functions, objects and arrays, modules, and asynchronous code (promises, async/await). This is covered by the Asynchronous JavaScript course, which is a prerequisite.
Does this course use the Options API or the Composition API?
The Composition API with <script setup>, recommended for new Vue 3 projects. The concepts (reactivity, props, events) transfer easily if you come across the Options API in an existing project.
Do I need to know TypeScript?
No. The course is written in JavaScript: when creating the project, answer No to the TypeScript question from create-vue (checked by default). Vue works very well with TypeScript, which you can add later: props can then be typed directly with defineProps<…>().
Why don't the code exercises contain .vue components?
The code exercises are run and checked automatically without a browser: they focus on component logic (calculations, filters, guards, stores). Building components is practiced in guided tasks in your own Vue project.
This course, told for your job
Say what you want to be able to do: “Vue.js” takes its place in your path, with examples from your field. The concepts stay those of the course.