Programming · Intermediate
Vue.js
The frontend framework you can learn in an afternoon and still be using in five years.
- Lessons
- 13 lessons
- Total runtime
- 34 hours of video
- Modules
- 5 modules
- Optional lessons
- 11 optional
Free. No account.
About this course
Vue occupies a genuinely useful middle ground. React gives you a library and expects you to assemble the rest; Angular gives you an entire opinionated platform. Vue gives you a framework with sensible defaults for routing and state, and lets you ignore them until you need them.
Its single-file components are the clearest idea in frontend tooling. Template, logic and styles for one component live together in one file, in that order, and the styles are scoped to that component by default. Anyone who has hunted through a stylesheet wondering which rule is affecting a button will recognise what that solves.
The reactivity system is the part worth understanding rather than merely using. Vue tracks which bits of state a render depended on and updates precisely those, which is why you rarely think about performance — and also why the occasional thing that fails to update is baffling until you know the rules.
Under two hours required. The optional lessons — the Composition API in depth, Pinia, and three separate full-length courses — take the pool past thirty hours if you want them. If you already know React, most of this will feel familiar with different spelling, and the comparison is instructive in both directions.
What you'll be able to do
- Build an interface from single-file components
- Use Vue's reactivity for state, computed values and watchers
- Pass data down with props and send events back up
- Handle forms, lists and conditional rendering with directives
- Judge honestly when Vue is a better fit than React for a given project
Curriculum
13 lessons · 34 hours
The Idea
2 lessons · 59m
- 01CompletedVue.js Explained in 100 SecondsFireshipVideoThe premise and the single-file component, in two minutes. Enough to see how Vue differs from React before anything asks you to write either.2m
- 02CompletedThe Best Way to Learn Vue — Crash CourseOptionalVue MasteryVideoFrom the team behind Vue's own training material, and current with the way Vue is written today rather than the way it was written in 2019. Start here if you want one modern orientation.57m
Building With It
3 lessons · 6h 15m
- 03CompletedVue JS Crash CourseTraversy MediaVideoA real application built from an empty project: components, props, events, reactivity and routing. The reactivity section is the one to slow down for — it explains both why Vue feels effortless and why the rare thing that fails to update does so.1h 40m
- 04CompletedVue.js Crash CourseOptionalTraversy MediaVideoThree hours building a real application rather than demonstrating directives. A good second pass once the basic shape of a component makes sense.2h 57m
- 05CompletedLearn Vue.js — Tutorial for BeginnersOptionalfreeCodeCamp.orgVideoA tighter alternative to the crash courses above, useful mainly as a second explanation of the reactivity model.1h 38m
The Composition API
3 lessons · 2h 15m
- 06CompletedVue 3 Composition API IntroductionOptionalAcademindVideoVue has two ways of writing a component and nearly all new code uses this one. Twenty-four minutes on what changed and why — take it before any tutorial that predates it confuses you.24m
- 07CompletedModern Vue.js Crash Course — TypeScript + script setupOptionalSyntaxVideoHow a Vue file actually looks in a current codebase: script setup, TypeScript, and none of the ceremony older tutorials carry.42m
- 08CompletedVue 3 & Composition API — Full ProjectOptionalTraversy MediaVideoThe same material applied over a whole project instead of a page, which is where composables start to pay for themselves.1h 9m
Routing and State
2 lessons · 1h 8m
- 09CompletedLearn Pinia in 30 MinutesOptionalMake Apps with DannyVideoShared state across components is the first thing that breaks when an app grows past a few screens. Pinia is Vue's answer and this is the whole of it in half an hour.34m
- 10CompletedPinia Setup StoresOptionalMake Apps with DannyVideoThe newer store syntax, which reads like the Composition API rather than like Vuex. Worth it if the store style in the previous lesson felt inconsistent with the rest of your code.34m
The Long Version
3 lessons · 23h 29m
- 11CompletedThe Ultimate Vue 3 Tutorial (100% Composition API)OptionalLaitureVideoSix hours written entirely in the modern style, with no Options API to unlearn afterwards. The best single long course here.6h 13m
- 12CompletedVue.js Course for BeginnersOptionalfreeCodeCamp.orgVideoSeven hours at a slower pace, covering routing, state and testing as well as the framework itself.6h 56m
- 13CompletedVue 3 Full Course — 10 Hours, 10 AppsOptionalSarthaksavvyVideoTen small applications rather than one big one. The most repetitive item here and the most effective, if repetition is what you need.10h 20m
Credits
Every lesson in this course was made by one of these channels. Tubeversity sequenced them; it did not make them. If a course is useful to you, the people below are the ones who earned it.