Intermediate · 5h 16m · 18 lessons
Vue.js
The approachable framework — from reactivity to composables and beyond.
What you'll learn
- ✦Build an interface from single-file components, each with its template, script and styles
- ✦Choose between ref, reactive, computed and watch, and use each one correctly
- ✦Bind data to attributes, forms and events, and render conditions and lists with directives
- ✦Pass data between components with props, emits, slots and provide/inject
- ✦Run code at the right lifecycle moment and extract reusable logic into composables
- ✦Decide when an app needs Vue Router, Pinia or Nuxt, and explain what each one adds
Part of these career paths
- Frontend Developer path · course 7 of 8
- Full-Stack Developer path · course 13 of 14
Certification projects
Build 4 projects to earn your certificate
Hands-on work that proves you can apply what you learned — part of the certificate requirements.
Syllabus
Module 1 · 58m
Meet Vue Free
What you'll be able to do
- Can explain what Vue does for a page and choose how to add it: a script tag on one widget or a full Vite app
- Can read a single-file component and say what its template, script and style blocks each hold
- Can show live data in a template with {{ }} and predict what the page displays
Module 2 · 58m
Reactivity Locked
What you'll be able to do
- Can declare state with ref or reactive and read it correctly in script and template
- Can derive values with computed and explain why a computed runs less often than a method
- Can decide between computed and watch, and write a watcher that runs a side effect on change
Module 3 · 54m
Directives Locked
What you'll be able to do
- Can bind attributes, classes and styles to state with v-bind
- Can build a form with v-model and event handlers, and predict the type of value it gives
- Can choose between v-if and v-show, and render a list with v-for and a stable :key
Module 4 · 50m
Components & communication Locked
What you'll be able to do
- Can pass data down with props and send changes up with emitted events, including v-model on a component
- Can build wrapper components with default, named and scoped slots
- Can share a value deep in the tree with provide/inject, and decide when a prop or a store fits better
Module 5 · 50m
Lifecycle & composition Locked
What you'll be able to do
- Can start DOM work and timers in onMounted and clean them up in onUnmounted
- Can extract repeated reactive logic into a composable and predict whether its state is shared
- Can use a template ref to focus, scroll or measure a real element at the right moment
Module 6 · 46m
Building apps Locked
What you'll be able to do
- Can set up Vue Router with dynamic params and fix a 404 on refresh
- Can move state that distant components share into a Pinia store and read it with storeToRefs
- Can decide between a Vite app and Nuxt for a project, and explain what Nuxt adds
More Web courses