Vue.js 2: Zero to Hero, Vuex Store, Vue CLI 3-Complete Guide

Discover the tools we'll use in this Vue.js course, including the V.A. scored quote area and the commander terminal for Windows, with guidance to download the exact setup.

Install nodejs and npm by downloading the appropriate installer for your operating system, run the setup, and verify the installation with node -v in the terminal.

We cover basic concepts of modern JavaScript, including objects and arrays, structuring, the spread operator, the this keyword differences in error function versus regular function, and promises.

Explore object and array destructuring to extract properties and values into individual variables, using curly braces for objects and square brackets for arrays, with practical examples.

Learn how the spread operator in JavaScript spreads array and string elements and copies objects, enabling array merging, copying without references, and overriding properties with concise syntax.

Compare regular and arrow functions in JavaScript and learn how this differs: regular functions use the owner context, while arrow functions inherit the parent context through lexical scoping, with Vue.js implications.

Learn how async/await improves readability over promises by avoiding callback hell, using setTimeout simulations, and handling errors with try/catch and a single catch block.

Create a Vue app by adding the Vue script and mounting a new Vue instance to a DOM element, then use data as an object or function with mustache bindings.

Master two-way data binding with the v-model directive in Vue.js, binding an input to a data variable so changes sync the view and model automatically.

Master conditional rendering in Vue.js by using v-if, v-show, v-else-if, and v-else blocks to control DOM visibility and distinguish removal from display none.

Learn how to bind data to element attributes with v-bind in Vue.js, including binding input values to a title variable, controlling disabled state, and using the colon shorthand.

Learn to handle events in Vue.js using v-on and the @ shorthand, define and call methods, and pass both arguments and the event object.

Learn to render a dynamic to-do list in Vue by maintaining a to-do list array, adding items via a method, and looping with v-for to display items and indices.

Students learn to dynamically style inputs in Vue.js 2 using :class with object and array syntax, applying green valid and red invalid borders, and disabling a button until three characters.

Explain how computed properties in Vue.js cache results and update only when their dependencies change, contrasting them with methods and demonstrating efficient handling of heavy operations.

Define and use Vue filters to format text at render time. Create a capitalize filter, apply it with a pipe, and see the original value remains unchanged.

Create reusable components in Vue.js, pass data via props, bind data with v-bind, ensure a single root element, and register components locally or globally to build a scalable interface.

Explore Vue.js lifecycle hooks from before create to destroyed, learning how data changes trigger updates and how to mount, render, and destroy a Vue instance.

Explore how the this keyword behaves in a Vue instance, comparing regular functions and arrow functions, and show whether this points to the Vue instance or the global window object.

Build a product manager app with add, list, edit, and delete features, using reusable components, props and events, and Bootstrap Vue; connect to a mock backend API to manage products.

Install the Vue CLI using the get started guide on vuejs.org, paste the installation command into your terminal, and verify the Vue version to confirm setup.

Create a Vue project with the Vue CLI, name it, initialize with default features and boilerplate, then run npm run to start the dev server with live reloading.

Discover how a Vue.js 2 project is organized, from public and index.html to the src folder, App.vue, and main.js bootstrap, with babel and lint configurations guiding the workflow.

Integrate BootstrapVue into your Vue.js project by installing BootstrapVue, importing it, and registering it in your code, then render Bootstrap components like a button to achieve a Bootstrap user interface.

Clean up the boilerplate, create an app header component with a bootstrap navbar, register it in the app, and display the header titled product manager.

Design the app layout by creating ad product and list product components in a bootstrap container, using cards, and importing components for a clean, responsive Vue UI.

Build a dynamic add product form in Vue.js using bootstrap form components, form groups, and two-way binding with v-model, including product name, price, brand, place, and inventory status.

Learn to handle ESLint warnings by adjusting the no-console rule, either disabling it globally or per file, and restart the server after changes.

Discover how to add form validation to the add product form in a Vue.js 2 course using v-validate, define required and numeric rules, and show red error messages on submit.

Set up json-server to create a local rest api from db.json, with auto-generated endpoints for posts and comments, and support for get, post, put, and delete operations.

Fetch the product list from a rest endpoint in a Vue.js 2 app using axios. Call get on mounted and store results in the product list, with error handling.

Explore how a parent component shares data with its child using props, and the child emits events to the parent, while keeping state in the root to prevent prop mutation.

Learn how to pass the product list from a parent component to a list product component using props and v-bind, render dynamic Bootstrap cards, and display stock status with badges.

Implement add product functionality by validating the form, emitting an ad product event to the parent, posting the product to the database, and clearing the form.

Implement delete product functionality by emitting a delete event from the child to the parent component, updating the product list and refreshing the displayed items.

Create a separate update product component and open a modal to edit details. Use v-model to toggle the modal, and handle open, close, and submit events.

Add update product functionality by pre-populating a form with product data, wiring props, and validating input before submitting, preparing for database update in the next video.

Enable updating products by emitting an update product event from the update form, passing data to the root via the list component, using a put request, and refreshing the list.

Build a product manager app by implementing routing and a Vuex store, moving from props and events to centralized state management, and debugging application state with Vue DevTools.

Vuex provides a central store for the application state, the single source of truth, where actions dispatch asynchronous tasks and mutations synchronously update state, trackable by dev tools.

Install the Vue devtools in your browser and open the Vue tab to inspect components as the app runs, and enable the state option to auto-show mutations and events.

Set up a Vue.js 2 project with Vuex store and Vue Router using manual feature selection and presets, then explore project structure, history mode, and lazy loading.

Set up a product manager app with vue router, adapting the project, install bootstrap and axios, add header and container, and build ad product and product list views for vuex.

Update the ESLint config to turn off the no-console rule in development, staging, and production, ensuring console statements are allowed in all environments.

Create and wire a Vuex store by separating state, mutations, and actions into dedicated files, then access product list state in components via computed properties.

Explore how to use the Vuex mapState helper to map store state to computed properties, choosing between array and object syntax for flexible state mapping.

Learn to fetch and filter in-stock product lists from a Vuex store using getters and mapGetters to keep data access clean and reusable across components.

Learn to implement a set products action and a set products mutation in Vuex, dispatching from the product list component to fetch data with axios and update the store.

Create and dispatch the ad product action on form submission, post the payload to the endpoint, and commit the add product mutation to update the store's product list.

Learn to delete a product in Vuex by creating a delete action that dispatches a delayed product mutation to filter the product from the list and update the UI.

Learn to implement update product actions and mutations in Vuex, dispatch the update action, and update the product list with a payload while validating form data.

Implement the mapActions helper in Vuex by importing mapActions, replacing dispatch calls with the map action method for the add product action, and passing the payload to update state.

Enforce Vuex strict mode to prevent direct state mutations from components, ensuring changes go through mutations. Configure strict mode only in development via environment variables to avoid production performance costs.

Implement spinners and loaders to indicate asynchronous actions like adding a product and loading the product list, with a boolean flag to show a bold step spinner.

Implement reusable toast notifications in Vue with a mixin, supporting variants, auto-hide, and success or error messages across components via a global mixin.

Manage environment variables in Vue.js using .env files for development, test, and production, with a prefix and using process.env to load values in the Vue CLI app.

Fix eslint errors in the Vuex project by addressing warnings such as payload not defined and unused actions. Comment out unused code and run npm run lint.

Learn how to build a Vue.js app in production with npm run build, producing a dist folder containing static assets and index.html for deployment on any web site.

Explore the source code for Vue.js 2 applications, mastering Vuex store integration and Vue CLI 3 workflows to build scalable, modern web apps.