Complete Vue.js 3 Course: Vuejs 3, Vite, TailwindCSS, Pinia

Learn that computed properties in Vue.js 3 must not modify data properties in a getter, as getters trigger only when accessed, with age depending on year and caution with arrays.

Learn how computed getters in Vue.js 3 cache results and re-run only when reactive values change, with year and city as examples, and avoid treating them as ordinary functions.

Sort a JSON array by year ascending with a computed property for a v-for list, keeping it reactive without mutating the original array, and add newest first and newest last.

Master Vue event modifiers—once, stop, self, capture, prevent, and passive—to control propagation and default actions, illustrated with nested divs, a clickable button, and a link example.

Explore how the .passive modifier improves efficiency during scroll or zoom by signaling the browser not to call the prevent default method.

Learn how to swap two variables without a third variable using arithmetic tricks for numbers and an array approach for strings, driven by understanding assignment expressions.

Explore how the sort method sorts arrays in place in JavaScript, using a comparator with a and b to return numbers for ascending or descending order and custom criteria.

Sort a products list by price and by the average rating in ascending order, then optimize by precomputing averages, adding a new property to store the average, and removing it.

Demonstrate the reduce method to deduplicate a cities array by building a list of unique names. Learn to adapt reduce to collect matches, such as items priced over 110.

Find the index of the biggest number without altering the array using a for loop or reduce, then apply to objects by identifying the highest price and listing all matches.

Learn to refactor a price-searching algorithm into a single reduce operation that finds the highest price and collects all matching items in one loop.

Create an object to tally city occurrences, then use reduce to update counts. Convert to a 2d array, sort by frequency descending, and extract the most frequent cities.

Learn to count element frequencies and extract most frequent items with a single reduce, using an analyze function that tracks max and list, while converting object to a 2D array.

Group items by a chosen property using a single reduce call to convert an array of objects into an object of arrays, handling missing rating as undefined.

Create a dynamic Vue.js 3 list with v-for, pull in object properties with a nested v-for, and sort by date using two show/hide buttons that toggle enabled states.

Fetch initial comments from the backend via the created hook. Use a computed pinned comments array to move the pinned item to the top.

Learn to sort list items individually in Vue.js 3 by maintaining temp and saved orders, swapping IDs to update a reactive list, and persisting the new order to the backend.

Create a dynamic, nested menu in Vue.js 3 that uses multiple v-for loops, cookies to persist item open states, and show/hide controls with an order array and default item.

Integrate cookies into the menu to remember selections by the init method building the order array from cookies and updating it with show, hide, and set cookie actions.

Learn recursion and how to deep copy arrays and objects, using for-in loops and the Israeli method to distinguish reference values from primitives for independent copies.

Implement a recursive render function that builds a dynamic ul or ol list from any object or array, displaying key-value pairs, primitive values, and functions, including nested structures.

Binds the input to the message property with v-model, enabling real-time updates, while the no, lazy, and trim modifiers control numeric conversion, update timing, and whitespace handling.

Limit user input in a Vue 3 app by enforcing a max length of 10, showing real-time remaining characters, and switching from input event to change event for truncation.

Bind three radio buttons Apple, orange, and peach to a single PICT property with v-model, group them by the same name, and ensure only one is checked.

Explore how v-model works with checkboxes and selection lists by binding to an array, using includes, push, and splice to sync the list with user selections, including multiple selection support.

Learn how to bind CSS classes in Vue.js using v-bind:class with object and array syntax. Control background and text classes through data properties and theme configurations to create dynamic styling.

Learn to control CSS in Vue.js 3 using the style attribute and binding directive, applying style objects and arrays with camelCase properties and data-bound values to color and font size.

Apply Vue.js 3 techniques to render a city list with v-for, bind classes for even and odd indices, use v-model to select cities, and color selected items tomato via styles.

Discover how update and render hooks work in Vue.js 3, before update, updated, render triggered, and render tracked hooks. See how data changes, template and next tick influence rendering.

Explore Vue.js 3 lifecycle hooks—from create to unmount—covering beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, and unmounted—and how data, props, and the DOM evolve.

Explore how multiple watchers monitor the same message property in Vue.js 3, using function and object syntax, with immediate and flush options to control execution order around update hooks.

Explore how to monitor data changes with the dollar sign $watch method in Vue, compare with the watch option, and learn how to start, stop, and control watchers.

Learn how to use Vue's $watch to observe arrays and objects, including memory-address triggers, immediate and deep options, watching specific elements, and updating by replacing the array or object.

Use a getter in the dollar sign watch return expression, watch multiple targets like city and nation with watcher, and monitor a sum a + b to trigger on changes.