Vue 3 full course in one day + helpful docs (Cheat Sheet)

Learn to start a Vue application with two approaches—npm via the CreateVue tool or a CDN—mount the app, and use single-file components (template, script, style).

Learn how Vue's two core features—declarative rendering and reactivity—work together with a template syntax, interpolations, and directives to render HTML based on JavaScript state and efficiently update the DOM.

Master data flow in Vue 3 by passing props from parent to child with values or dynamic binding via v-bind, and emit events from child to parent to update counters.

Explore how the keep alive component caches the initial state of dynamically toggled components, preserving values when switching between myUser and CustomInput by wrapping them in the KeepAlive component.

Explore Vue 3 transitions with Transition and Transition Group to animate elements entering, leaving, or moving. Learn practical steps and CSS rules for using v-if, v-show, v-for, and dynamic components.

Master Vue 3 lifecycle hooks, including created, mounted, updated, unmounted, and before-create, before-mount, before-update, before-unmount. See a practical example fetching data in created and rendering with v-if as data arrives.

Explore the Vue 3 options API watch option, binding a checkbox with v-model to a reactive isUppercase variable, and using watch and methods to toggle text case.

Explore the Vue 3 options API computed property, replacing multiple watchers with a cached reactive value that depends on A and B, with getter, setter, two-way binding, and type conversion.

Explore setting up vue-router in Vue 3 using the options API: define routes (including dynamic /users/:id), import components, render with router-view, and navigate via router-link and programmatic routing.

Learn how to use props and emits in Vue 3's composition API, register props, access them in setup, implement methods, and expose them to the template.

Compare ref() and reactive() in composition api, where ref() handles primitives and objects with value field while reactive() targets objects; use ref() in setup to avoid mistakes, unref or .value.

Learn how the composition api manages the dom with a template ref, v-bind, and setup; return the ref name and use .value to interact with the element.

Explains the script setup syntax as syntactic sugar for the composition API. Demonstrates using defineProps, defineEmits, and setup attribute to access props, emits, and components in the template.