Complete VUE JS Developer Course – Vue 2 and Vue 3

Master the Vue instance, data, and methods to create reactive components using interpolation and directives. Explore npm and CDN setup, and how binding and events connect state to the UI.

Learn two-way binding with v-model in Vue to keep input, select, and component state in sync, explore real-time updates, and compare manual binding using value and input events.

Explore Vue directives for dynamic templates: v-if, v-show, v-for, v-bind, and v-on. Learn list rendering, conditional rendering, event binding, and dynamic binding with interpolation and keys.

Build a task tracker app in Vue 2/3 that adds tasks, toggles completion, and shows or hides completed tasks using v-model, v-for, v-on, v-if, and v-show.

Learn how to create reusable Vue components with template, script, and style. Name components in Pascal case, apply scoped versus global styling, and import, register, and use them across views.

Explore the differences between local and global components, register and reuse them in a Vue app, and see practical examples like info card and button box.

Explore props and custom events in Vue to pass data from parent to child and back, use two-level parent-child data flow, prop validation, and object-based props with defaults.

Build dynamic header and footer components using props, register them globally, and display them on every page. Pass title, year, and brand to customize the UI and reinforce Vue components.

Explore the Vue.js lifecycle by tracing lifecycle hooks from before create to destroyed, including created, before mount, mounted, before update, updated, before destroy, and destroyed.

Explore the four Vue lifecycle hooks: created, mounted, updated, and destroyed, and learn how data initialization, dom readiness, and refs drive focus and UI updates in a life cycle demo.

Practice core Vue concepts with a hands-on to-do app that uses a timer and API simulation to fetch data and track page stay, applying created, mounted, updated, and destroyed hooks.

Compare methods and computed properties to derive values in Vue 2 and Vue 3. Learn when to use each for clean, performant code and understand caching behavior of computed properties.

Explore watchers in Vue, learn how a watcher triggers on reactive state changes, returning old and new values, and apply it to live form validation, api calls, and cross-state updates.

Build a budget tracker that records income and expenses, shows total spent, remaining balance, and percentage spent, and warns when the budget is exceeded using a watcher.

Learn how slots in Vue.js create placeholders inside components, allowing parent content like p, h1, or lists to render in a reusable box. This helps you build flexible, composable components.

Master default, named, and scoped slots in Vue to compose reusable components. Discover how default slots render content, named slots organize sections, and scoped slots share data with the parent.

Build a reusable blog card component in Vue with header, content, and footer slots, then compose it in a blog list using default, named, and scoped slots.

Install and configure Vue Router, use router view and router link, navigate with path, name, params, and query, and review base, history or hash mode, and scroll behavior.

Learn to implement dynamic route parameters and nested routes in Vue.js, render the same view for different ids, and build a settings page with child routes like profile and password.

Implement an auth guard in Vue 2 with Vue Router to restrict access to pages, using local storage to track login state and before navigation guards to route unauthenticated users.

Install and configure Vuex in a Vue 2 project to manage global state. Explore state, mutations, actions, and getters, and create a store with a login flag accessible across components.

Learn how to structure a Vuex store with modules, organize state, mutations, actions, and getters, and access reactive state in components using map state and getters.

Explore Vuex store structure with state, getters, actions, and mutations across modules, and learn to access and update global state from components using map getters, map state, and commit-based mutations.

Create a global mixin to access Vuex store data across modules without re-importing, using map getters and map actions to reach the root state and other modules.

Install axios, configure a base url and headers, and create a plugin with a reusable Axios instance to enable API calls in the Vue app.

Build get and post requests with axios to a public API, display post titles in a Vue list, and manage errors with try-catch.

Learn to fetch posts from a public API using axios directly in Vuex, manage loading and errors with a posts module, and render results in a Vue component.

Build a Vue.js job board app with home and detail pages, saved jobs stored locally, and login flow. Use routing and Vuex auth and jobs modules with slots and filters.

Deploy your Vue app on Firebase hosting using the free service, initialize hosting, set the public build directory, and deploy for a shareable URL.