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).

Explore the script section and the options API in Vue 3, focusing on the data function that returns the initial reactive state like count, and how updates re-render.

Learn the Vue 3 options API by defining methods in the Methods object, using this to update a count with a plus method and trigger reactive updates.

Explore how Vue 3 reactivity uses proxies to make data inside the data function reactive, updating the page when a count changes via get and set handlers.

Open the HelloWorld.vue file to learn template interpolations with double braces. See how a message variable is passed from the script to the template and used with expressions.

Master the v-on directive in Vue 3 templates, attach event listeners with the shorthand @, pass parameters and access the event object, and apply modifiers like once.

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.

Learn how the v-bind directive binds attributes and props in Vue 3, using colon shorthand, dynamic attribute names, and class and style bindings with conditions and arrays.

Learn how the v-if directive conditionally renders elements in Vue 3, using v-else and v-else-if with a data-driven isRender variable, and toggle rendering via a changeRender method.

Explore v-text, v-html, and v-show in Vue 3, updating text content, rendering inner HTML, and toggling visibility while contrasting v-show with v-if for DOM behavior.

Render a dynamic user list with the v-for directive from an array or object, using a reactive users array, unique keys, and v-bind for item fields.

Explore how the v-model directive enables two-way binding between a reactive message variable and form elements in Vue 3, with input examples and modifiers like lazy, number, and trim.

Explore core and rare Vue directives, including v-if, v-show, v-bind, v-slot, v-for, v-on, v-model, v-pre, v-once, v-cloak, and mustache interpolations, and learn to create custom directives.

Discover special template attributes in Vue, including key for v-for, ref to register element references, and is, plus v-on shorthand usage to toggle classes via refs.

Learn how to create and use custom Vue 3 components, import and register them, and structure single file components with template, script, and style sections for reusable user interface.

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.

Learn how to implement two-way data binding in Vue 3 using v-model with custom components, including the modelValue prop, update:modelValue event, and replacing v-bind and v-on.

explore the Vue 3 teleport component to render modal content in a different DOM element, using v-if and a reactive open state, with styling for a fixed modal.

Discover how the special component acts as a meta component to render dynamic components in Vue 3, using the is attribute to swap myUser and customInput components.

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.

Learn how slots enable parent and child cooperation in Vue, with named slots like header and footer, a default slot, and v-slot and v-bind data flow.

Learn how to share component options across Vue components with mixins by importing a mixin, exporting it, and registering it to merge data and methods like increaseCount.

Learn how to pass data from a parent to a deep child using Vue 3's provide and inject, with provide returning an object and inject binding names.

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.

Install the plugin, import the plugin, and call the use method with the router instance to add the plugin to your Vue app.

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 install and configure Vuex, a centralized state management plugin for Vue apps, with state, mutations, actions, getters, and modules, and how reactivity updates the UI.

Pinia is a Vue store library that shares state across components; this lesson covers installing Pinia, defining stores with state, actions, and getters, and using them with the options API.

Master the composition API setup function as the entry point, replacing the Options API data function, and learn to use reactive and ref with template unwrapping, props, and context.

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.

Learn to use Vue 3 composition api reactivity utilities, including ref, unref, toRef, and toRefs, to read, pass, and mutate reactive state and convert objects to plain refs.

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.

Master the Vue 3 composition API by using the computed function with a getter and setter and exposing results to the template.

Master the watch option in the Vue 3 composition API by watching refs, functions, arrays of sources, or reactive object properties, with deep, immediate, and flush options.

Learn how the composition API's watch effect differs from watch. Watch tracks a specific source, while watch effect tracks all reactive variables inside its callback and runs when they change.

Explore the composition api lifecycle: six main hooks with on-prefixes, how to import and use them inside setup, and how to migrate initialization logic from created to setup.

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.

Learn to use provide and inject in the composition API by importing them and applying in setup, converting from options API to pass a local message between components.

Use the composition API to work with Vuex by importing useStore, calling it in setup, and accessing mutations, actions, and getters; note Pinia as the modern alternative.

Learn to use Pinia with the composition API by importing stores, reading and mutating state with patch and reset in setup, using actions and getters, and migrating from options API.

learn to use the router in Vue 3's composition API, importing useRouter and useRoute, creating a router in setup, navigating with router.push, and accessing route.params.

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.

Learn to build Vue 3 apps with single-file components, mastering template, script, and style sections, options and composition API, reactive data, lifecycle hooks, routing, and Vuex or Pinna package.