Vue JS 3 For Modern Web Development - Beginner to Advanced

Present a basic to-do list app in Vue.js, applying declarative rendering with v-if and v-for, two-way data binding, and v-on click to toggle items, plus add and clear all features.

Set up a Vue 3 app in Visual Studio Code, initialize with createApp, mount to #app, render a todos array with text and done, and bind the done class.

Toggle the done state for todos in a Vue.js app using a click event, update the dynamic done class, and implement a clear all button with conditional visibility.

Explore Vue.js lifecycle hooks and how to load local storage data during app load using before create and created hooks, then observe updates with before update and updated.

Load todos from local storage with getItem, parse the stored JSON to initialize the todos data property, then keep storage updated on add, toggle, and clear actions.

Learn how to persist todo state using local storage in a Vue app, choosing between an updated lifecycle approach and a dedicated store todos method, with performance considerations.

Learn to build a Vue 3 quiz game using NodeJS, Vue CLI, and npm, with components and Axios-powered HTTP requests to the Open Trivia DB API.

Create a Vue 3 app from scratch with the Vue CLI, selecting features like Babel, Sass, ESLint on save, and optional router and Vuex.

Explore the Vue.js application boilerplate, understand the skeleton, and navigate the public and source folders, key files like Main.js and App.vue, and the build, serve, and dependency setup.

Clean up unused components and finalize the HTML structure in a Vue.js 3 app, then prepare to fetch trivia questions via HTTP requests from the Open Trivia API.

Learn to perform http requests in Vue.js with axios by installing via npm, importing and configuring axios to consume APIs across components.

Make http requests to the Open Trivia API using axios in a Vue 3 component, using the created hook, handling the response, and rendering the results data.

Define reactive data properties for question and answers, fetch API data inside a Vue component, and render the question with a shuffled set of answers in the template using v-html.

Learn how to use Vue JS 3 computed properties to build a shuffled answers array from incorrect and correct answers.

Learn to shuffle an answer array in JavaScript using splice and a random index, ensuring the correct choice appears at a random position for Vue.js quizzes.

Render the possible answers as radio buttons by looping a shuffled answers array via a computed property. Explore computed properties vs methods, template tags, v-for, and key usage.

Handle the send button by using v-model to capture the chosen answer, compare it to the correct answer, and show immediate feedback on whether you got it right.

Use a data property answerSubmitted to control post-submit user interface: disable radios, show the result, reveal the next question button, and update scores after submission.

Create a separate score board component to display the score, import and register it, and learn how to pass data from the main component to the child.

Pass score data from a parent to a child component in Vue 3 using props, with win and lose counts updated in real time and stored via local storage.

Build a multi-page shopping app in Vue 3 with actions to fetch products, Vue Router for home and basket, and Vuex for centralized state; manage bag items and grand total.

Set up vue router, create view pages in the views folder, configure routes in the index.js, and navigate with router-link and router-view using hash-based URLs, including product routes and parameters.

Load the products data from a fake store API using axios, store it in Vuex for centralized access, and display it on the page.

Learn to centralize data with Vuex by defining a state as the single source of truth, accessing it from views, and using actions and mutations for predictable state changes.

Learn to write actions and mutations to manage application state, dispatch actions from components, and commit mutations with API data to update products in the store.

Learn how actions and mutations load products from an API, commit them to state, and expose them to components via a computed property, ensuring reactive updates.

Render the products by looping the computed array and binding dynamic image, title, and price, with the price shown to two decimals.

learn to add products to a shopping bag in Vue.js 3 by managing a bag state, dispatching add to bag actions, and using a quantity property.

learn how to prevent duplicate items in the shopping bag by adding an isInBag check using the array find method on product id, and toggle add/remove buttons in Vue.js.

Remove items from the bag in a Vue.js app by dispatching a remove from bag action with a product id, updating the bag state, and reflecting changes in the UI.

Use map state helper in Vue.js to simplify computed properties for products and bag items. Update the header bag count and require confirmation before removing items.

List and manage shopping bag items in Vue.js by rendering products from the bag, adjusting quantities with plus and minus buttons, removing items, and calculating the grand total.

Calculate the order total in the basket by summing each item's price times its quantity, rounding to two decimals, with state managed by Vuex and persisted via local storage.

Vue.js offers options API and composition API for building components; both cover common use cases, while the composition API uses vanilla JavaScript style and script setup exposes template variables.

Demonstrate building a Vue.js task manager with the composition API, including add, mark done, reopen, to-do and done filters, modal task creation, and local storage persistence via Vite.

Explore Vue 3 composition API with script setup, expose variables to the template, and use ref for primitives with v-model, while noting arrays and objects become reactive later.

Discover how to make arrays and objects reactive with Vue 3's reactive, render a dynamic tasks list with v-for and v-model, and add validation and input clearing.

Learn to structure a Vue app by separating UI into components, using the composition API and define props for prop data, and applying scoped styles with sass nesting.

assign unique ids to tasks, display 'done' or 'to do' with a ternary, and toggle completion by emitting a custom event to the parent to update the tasks array.

Filter tasks by state in Vue 3 by extracting the filter into its own component, using a ref, props, and emitted events, with a clear button when active.

Learn to use computed properties in Vue 3 to filter a tasks list by a reactive filter, with a switch statement for done and to-do views.

Create and integrate a reusable modal window component in Vue 3, including a separate modal close button, open/close logic with a reactive ref, and a close pop up custom event.

Use slots to render dynamic content inside a reusable modal component, featuring a form. Organize components into folders and plan a Pinia store to manage data as the app grows.

Centralize state in a store as the source of truth for tasks and filters, using Pinna to feed components directly and simplify updates.

Install Pinga, initialize a setup store in a Vue 3 project using the composition API, and implement a use tasks store for reactive state.

Transfer all task-related state to a centralized task store, including the filter by, toggle completed, and add task functions. Remove props, use store-backed computed properties, and ensure end-to-end task management.

Learn to fix an issue with the :key attribute in Vue.js by replacing index keys with unique task IDs, ensuring stable rendering when filters update.

Add a new task in a Vue.js 3 app by updating the task model in the store, then open and close the modal with dedicated actions and reset fields after closing.

Master persisting tasks in a Vue 3 app by saving to local storage, loading on startup, and updating the store whenever tasks change.