Vue Tutorials
A full Vue course: templates, reactivity, components, events, fetch, and Vue Router basics.
This course includes 18 lessons grouped from first steps to more capable workflows. Work through a group in order, or jump to the task you need today. Every lesson includes explanations, copyable examples, and tips written for beginners.
Cheatsheet · Search this course · Web category · All categories
Getting started
Topic page- Getting Started with Vite and VueScaffold a Vue app with Vite, start the dev server, and recognize the starter files.
- Single-File ComponentsUnderstand the template, script, and style blocks inside a .vue file.
- Template SyntaxInterpolate text, bind attributes, and use basic directives in Vue templates.
Reactivity and logic
Topic page- Reactive DataDeclare reactive state with ref and reactive so the UI updates when values change.
- MethodsGroup behavior in functions and call them from the template or other logic.
- Computed PropertiesDerive values that update automatically when their dependencies change.
- Conditionals and ListsShow UI with v-if / v-show and render collections with v-for and keys.
UI patterns
Topic page- Handling EventsListen for DOM events with v-on and update reactive state.
- Forms and v-modelBind inputs to state with v-model for two-way form controls.
- Components and PropsSplit UI into child components and pass data down with props.
- Emitting EventsSend messages from child to parent with defineEmits and custom events.
Effects and data
Topic pageRouting and polish
Topic page- Vue Router BasicsAdd client-side routes so URLs map to different views.
- Organizing ComponentsStructure a growing Vue app with views, components, and clear naming.
- DevTools and DebuggingInspect component state with Vue DevTools and fix common beginner mistakes.
- WatchersReact to changing values with watch when you need side effects beyond computed properties.
- Next StepsReview Vue skills from this course and choose useful topics to learn next.