Learn Master in Vue - 2024

The most recent version of Vue (Vue.js 3) thoroughly and from scratch. We'll go over all the fundamentals, but beyond that, this course also delves into more complex ideas like the Composition API that was introduced with Vue 3.

Because they provide us with the same responsive, wonderful user experience we know from mobile apps - but now in the web - frontend frameworks like Vue JS are incredibly popular.

No wonder some of the highest paying positions in the market require knowledge of frontend frameworks like VueJS!

You may be familiar with Angular 2+ and ReactJS; however, VueJS integrates the finest features of both frameworks, making it simple and enjoyable to create everything from small widgets to substantial enterprise-level apps.

Additionally, it's okay if you are unfamiliar with any of the two aforementioned front-end frameworks; you will learn everything you need to know throughout this course.

What you learn from Vue course?

It's all covered in this course!

Before moving on to more complicated and advanced topics, we'll start with the very fundamentals, explaining what Vue.js is and how it functions, but I'll be honest: There's too much to cover in this course to put it all in one sentence. Instead, here is what you'll learn in this course:

• Why would you use VueJS? What is it?
• The Fundamentals (covering fundamental syntax, recognising templates, and much more!)
• How to Listen to Events and Output Reactive Data
• DOM interaction (rendering lists, conditionally attaching and detaching elements, etc.)
• establishing the development environment and workflow
• Component Use (and what Components are to begin with)
• A Closer Look at Vue's Behind the Scenes
• Associated with Form Inputs
• HTTP requests are sent to backend APIs
• Verification and Vue
• How to Use Animations and Transitions to Enhance the Beauty of Your App
• How to build a fantastic Single-Page Application (SPA) with routing
• How to use Vuex to enhance State Management
• How to Install an App
• And a lot more...

What is Vue JS?

An open-source model-view-viewmodel front end JavaScript framework called vue.js is used to create single-page apps and user interfaces.

Evan You invented it, and he and the other members of the active core team keep it up to date.

Building user interfaces with the Vue JavaScript framework. It provides a declarative and component-based programming model that enables you to effectively create user interfaces, whether they are straightforward or intricate.

It builds on top of common HTML, CSS, and JavaScript.

The rendering mechanism used by Vue JS is truly reactive, compiler-optimized, and rarely needs human optimization.

Why should you learn Vue?

Progressive Framework	You may adopt the Vue.js framework gradually, making it simple to include into ongoing applications.
User-Friendly	Vue's straightforward syntax and low barrier to entry make it ideal for novice programmers, who benefit from the language's speedy development and short learning curve.
Versatile and Lightweight	Vue.js is a small but mighty framework for creating responsive and interactive UIs.
Component-Based Architecture	Because of its component-based architecture, Vue.js makes it easy to reuse and maintain code.
Reactive Data Binding	Vue's reactivity approach simplifies state management by immediately updating the DOM if data changes.
Extensive Ecosystem	Vue's extensive library and plugin ecosystem allows it to meet a wide range of development requirements.
Performance	The efficient rendering algorithms and virtual DOM that are part of Vue both contribute to its lightning fast performance.
Great Documentation	Vue.js's robust documentation and user community make it simple to learn the framework and receive answers to questions.
Growing Popularity	The popularity and enthusiasm for Vue.js among its user base have driven up its market value.
Modern Web Development	If you want to be on the cutting edge of web development, learning Vue.js will provide you the tools you need to create dynamic, responsive, and interactive websites.

What will you require?

• Basic understanding of JavaScript is necessary
• Knowledge of ES6 is preferred but not required
• The course assumes some familiarity with HTML and CSS.

Syllabus

Getting Started

• Welcome to the Course.
• "Vue.js" – what is it?
• Various Methods for Using Vue
• Examining Alternatives to Vue
• Making Your First App Using Only JavaScript
• Be a part of our online learning community.
• rebuilding the app using Vue
• "Vanilla JavaScript" against Vue (just JavaScript)
• Setting Up the Environment for Course Development
• Course Description and Content
• Tips For Making the Most of This Course
• Module Materials

Basics & Core Concepts - DOM Interaction with Vue

• Introduction to Module
• Vue App Instances: Setting Up and Connecting
• Data binding and Interpolation
• Utilizing the "v-bind" Directive, binding attributes
• Understanding Vue Apps "methods"
• Internal Data Processing in a Vue App
• Using v-html to output raw HTML content
• An initial summary
• Time to hone your data binding skills
• Event Binding: An Overview
• Events & Techniques
• Utilizing Event Arguments
• Utilizing Native Event Objects
• Looking into Event Modifiers
• Using v-once to lock content
• Event Binding Practice Time
• Two-Way Binding = Data Binding + Event Binding
• Data Binding Techniques: How They Work
• What Are Computed Properties?
• Utilizing Watchers
• Watchers versus Computed Properties versus Methods
• Shorthands for v-bind and v-on
• Practice Reactivity Now
• Inline Styles and Dynamic Styling
• CSS Classes Adding Dynamically
• Computed properties and classes
• Classes Dynamic: Array Syntax
• Time to Put Dynamic Styling Into Practice
• Module Overview
• Module Materials

Rendering Conditional Content & Lists

• Introduction to Module
• Recognizing the Issue
• Conditional Content Rendering
• if, else, and if-else
• Utilizing v-show Rather Than v-if
• Creating Data Lists
• A deeper look into v-for
• Delete List Items
• Keys & Lists
• Time to Put Conditional Content and Lists Into Practice
• Module Overview
• Module Materials

Course Project: The Monster Slayer Game

• Introduction to Module
• Initial Methods & Project Setup
• the Health Bars being updated
• A "Special Attack" being added
• Including a "Heal" feature
• the addition of a "Game Over" screen
• completion of the core functionality
• Battle Log addition
• Module Materials

Vue: Behind the Scenes

• Introduction to Module
• A Brief Overview of Vue's Reactivity
• The Deep Dive into Vue Reactivity
• One app versus several apps
• Recognizing Templates
• Utilizing references
• The DOM Update Method in Vue
• Theory of the Vue App Lifecycle
• Lifecycle of a Vue app - Practice
• Module Materials

Introducing Components

• Introduction to Module
• Recognizing the Issue
• Defining Components
• Why: Using Components to Create Complex User Interfaces
• Different Vue Apps vs. Different Components
• Module Materials

Moving to a Better Development Setup & Workflow with the Vue CLI

• Introduction to Module
• Why a Development Server Is Necessary
• What Motivates Us to Want Better Developer Experience?
• npm run serve issues (Vue CLI)
• How to Install & Use the Vue CLI
• Examining the Developed Project
• Examining the ".vue" files and the Vue code
• VS Code being updated with the "Vetur" Extension
• Details on ".vue" Files
• A Fresh Vue Initiative
• Making a Simple Vue App
• A Component is Added
• Including Style
• One minor addition
• A Different Setup - Using Volar & "npm init"
• Module Materials

Component Communication

• Introduction to Module
• The "Props" (Parent -> Child Communication) are now available.
• Proper Prop Use and Changing Props
• Verifying the Props
• Values Supported by Props
• Utilizing Dynamic Prop Values
• Sending Custom Events (Parent to Child Communication)
• Creating and Verifying Custom Events
• Fallthrough of the Event and Binding of All Props
• Demo: Adding and Connecting Components
• Demo: Increasing Communication Components
• Time to Put Props and Custom Events to the Test
• Possibly problematic
• To The Rescue: Provide + Inject
• Inject + Provide for Functions and Methods
• VS props and custom events, provide and inject
• Module Overview
• Module Materials

Diving Deeper Into Components

• Introduction to Module
• project setup
• Components: Local vs. Global
• Applied Styles
• Presenting Slots
• Known as Slots
• Styles & Compilation for Slots
• Additional Information Regarding Slots
• Selected Slots
• Adaptive Components
• Maintaining Dynamic Components
• Applying Our Knowledge to a Problem
• Elements that Teleport
• Utilizing Fragments
• Style Guide for Vue
• Switching to a New Folder Structure
• Module Overview
• Module Materials

Course Project: The Learning Resources App

• Introduction to Module
• Initial Setup & Steps
• First Props & Components
• Style and Additional Components
• BaseCard and Header Components
• A Base Button being added
• Fallthrough for Dynamic Components & Attributes
• Tabs: Adding and Designing
• Inserting a Form
• Getting User Feedback
• Modular Dialog Addition
• Eliminating Items
• Include "Teleport"
• Module Materials

Forms

• Introduction to Module
• inputs & v-model
• Implementing v-model Modifiers and Numbers
• Dropdowns and the v-model
• Using Checkboxes and Radio Buttons with the V-Model
• Basic Form Validation Added
• Construction of a Custom Control Component
• Applying the v-model to custom components
• Module Overview
• Module Materials

Sending Http Requests

• Introduction to Module
• Starting an App & Why a Backend is Necessary
• A Backend is added
• How to Send HTTP Requests (Not)
• POST Requesting Data and Storing It
• Http Methods & Requests (Verbs)
• Utilizing Axios Rather Than "fetch()"
• Data Getting (GET Request) and Response Data Transformation
• When a Component Mounts, Data Loads
• displaying the message "Loading..."
• The "No Data" State: Handling
• Technical and browser-side error handling
• Managing Responses to Errors
• Module Overview
• Module Materials

Routing: Building “Multi-Page” Single Page Applications

• Introduction to Module
• Why & What
• Setup for Routing
• Routes Registration & Rendering
• Using the router-link to navigate
• Formatting Active Links
• Automated Navigation
• Data Transfer Using Route Parameters (Dynamic Segments)
• Dynamic Paths & Navigation
• An e-bug
• Parameter Data Update with Watchers
• Parameters Passing as Props
• "Catch-all" routes and redirecting
• Nested Routes Utilized
• Named Routes & Location Objects Provide More Fun
• Query Parameters
• Using Named Router Views to Render Multiple Routes
• Regulation of Scroll Behavior
• Let's talk about Navigation Guards
• Expanding on Navigation Guards
• The worldwide "after each" guard
• Beyond Entering: Guards on the exit route
• Making Use of Route Metadata
• Setting Up Route Files
• Summary
• Module Materials

Animations & Transitions

• Introduction to Module
• Basics of Animation & CSS Transitions
• Knowledge of CSS Animations
• Why Is "Just CSS" Insufficient?
• CSS Animations Playback with the Aid of Vue
• The Transition Component is utilised
• Using the Transition Component in CSS Animations
• Use of Individual CSS Class Names
• Animating a Modal, for instance
• Changing Between Several Elements
• Making Use of Transition Events
• Construction of JavaScript Transitions (instead of CSS)
• Taking away CSS Transitions
• How to Start Using Animated Lists
• Lists with "transition-group" animation
• List item movement animation
• Routing Changes That Animate
• Animated route changes: A Important Note
• Module Materials

Vuex

• Introduction to Module
• Why & What
• Making and Utilizing a Store
• Linking Elements to the State
• Mutations: A Better Method of Changing Data
• Payloads for Data Transmission to Mutations
• Introducing Getters: A Better Data Acquisition Method
• Using Actions to Run Async Code
• Understanding the "Context" of the Action
• Mapper Helpers usage
• Ex: Adding Another State
• Utilizing Modules to Organize Your Store
• Knowledge of Local Module State
• Modules for Namespacing
• Vuex Code & File Structure
• A Challenge!
• Challenge (1/3) Solution
• Challenge (2/3) Solution
• Solution to the Problem (3/3)
• Summary
• Module Materials

Main Project: “Find a Coach” Web App

• Introduction to Module
• preparing the project/web application
• Creating a Data Requirements Plan
• Choosing the Components and Layout
• Enrolling Routes
• Route Page Components Adding
• developing the primary layout and styling
• Connecting Pages
• Including Coach Data and Vuex
• working on the items on the coaches' list and list
• Including a Few Base Elements (Base Card, Base Button, Base Badge)
• The Coach Detail Component's Construction
• Choosing Coaches
• Coach Registration: The Form
• Coaches being added to Vuex
• Form Validation is added
• Developing the Contact Form
• Using Vuex to Store Requests (Messages)
• Sending Outcoming Requests (Messages)
• Request Filtering for the Active Coach
• Putting Coach Data in Storage by Sending a PUT HTTP Request
• Getting Coach Information (GET Http Request)
• A Loading Spinner being rendered
• Http Error Handling Addition
• Sending Http Requests for Coaching
• Http Response Data Caching
• Route Transitions are Added
• The summary and "Not Found" page
• Module Materials

Vue & Authentication

• Introduction to Module
• How Vue Apps Authentication Operates (or any SPA)
• Safeguarding and Locking Backend Resources
• Adding a Page for Authentication (Login & Signup)
• Making Vuex ready
• "Signup" Action & Flow Addition
• Better UX: Spinner loading and error handling
• "Login" Action & Flow Addition
• Token Attachment to Outgoing Requests
• A UI Update Based on Auth State
• A "Logout" Action & Flow should be added.
• Router Authentication (incl. Navigation Guards)
• A "Auto Login" addition
• A "Auto Logout" addition
• Summary
• Module Materials

Optimizing & Deploying Vue Apps

• Introduction to Module
• What Should I Use?
• Utilizing asynchronous components for optimization
• Observation: Async Components & Routing
• Making the Project Production-Ready
• Setting up a Vue App
• Module Materials

The Composition API - Replacing the Options API

• Introduction to Module
• Which Issue Is The Composition API Designed To Address?
• Substituting "refs" for "data"
• swapping out the setup() method
• Development of "reactive" Objects
• Reactivity: An In-Depth Look
• Regular Functions in place of "methods"
• Practice Time: Data & Functions
• Substituting the "computed" Function for "Computed Properties"
• Composition API and Two-Way Binding
• Utilizing Watchers
• Composition API Core Building Blocks should be drilled now.
• An initial summary
• Use of Template References
• The Composition API, components, and props
• Creating Specific Events
• Utilizing Provide/Inject
• Hooks for the Lifecycle in the Composition API
• Composition API Migration: An Example Project from Options API
• A First Component Migration
• Moving a Large Component
• Migration of the Last Components
• The Composition API, parameters, and routing
• The Composition API as well as the Route & Router Objects
• Using the Composition API and Vuex
• Summary
• Module Materials

Reusing Functionality: Mixins & Custom Composition Functions

• Introduction to Module
• Adaptability Ideas
• Utilizing Mixins
• Mixin Merging: An Understanding
• Worldwide Mixins
• Negative aspects of mixins
• Composables, custom hooks, and the composition API
• Additional Custom Composition Features
• Why Mixins Beat Hooks / Composables
• Making a "Search" Hook, for instance
• Hooks Custom Gotchas
• Additional Ideas for Custom Hooks and Composables
• An example of a customized hook
• Module Materials

Roundup & Next Steps

• Thanksgiving
• Where to?

Vue 2 to Vue 3 Migration

• Overview of Vue 3
• Significant Modifications & Migration Steps
• New Features in Vue 3
• (Optional!) The New Composition API
• Further Resources for Migration

What you’ll learn?

• Build incredible Vue.js applications, ranging from small, straightforward ones to substantial, enterprise-level ones.
• Recognize the Vue.js Theory and Apply it to Real Projects
• Utilize Vue.js in both single-page and multi-page applications (MPAs and SPAs)
• Learn about the most recent Vue version (Vue 3), which has the brand-new Composition API.

Who can enroll this course?

• Anyone who is interested in front-end development and the major JavaScript frameworks
• People who want to develop Reactive Applications that run in the browser
• Students who prefer a native JavaScript Framework, 
• People who are getting started with Angular 2
• Angular 2 got you down? It's time for VueJS!

Course Duration

• Course Duration
• 200+ Lectures and 40+ Hours of on Demand HD Videos
• Certificate of Completion
• 5214+ students enrolled
• Complete Practical Training
• Watch Videos on Android and iOS App, TV, Computer & Tablets