Home

All courses

Vue - The Complete Guide (incl. Router & Composition API)

Web Development

Vue JS

Development

Vue - The Complete Guide (incl. Router & Composition API)

Vue.js is an awesome JavaScript Framework for building Frontend Applications! VueJS mixes the Best of Angular + React!

4.7

(65990)

255489 enrolled on this course

Last updated 11/2021

None

₹ 3999.0

₹ 5499.0

Buy Now

30-Day Money-Back Guarantee

Lessons

Quizzes

Duration

13 Hours

Skill level

Beginner

Language

English

Certificate

Yes

Full lifetime access

Yes

Description

Join this bestselling Vue course to learn how to use the latest version of VueJS to build amazing, modern web apps!
No matter at which metric you look at (Google Trends, Github Stars, Tweets ...) -
VueJS is the shooting star
in the world of JavaScript frameworks -
it simply is amazing
!
This bestselling Udemy course teaches the
latest version of Vue
(Vue.js 3)
from the ground up
and in great detail. We'll cover all the core basics but we'll not stop thereafter - this course also dives into advanced concepts like the Composition API introduced with Vue 3.
Frontend frameworks like Vue JS are
extremely popular
because they give us this reactive, great user experience we know from mobile apps - but now in the browser! No wonder that
jobs
requiring frontend framework skills like VueJS are amongst the
best paid
ones in the industry!
You may know Angular 2+ and ReactJS, well,
VueJS combines the best of both frameworks
and makes building anything from
small widgets to big, enterprise-level apps
a breeze and a whole lot of fun!
And if you don't know the two mentioned frameworks: That's fine, too,
this course does not expect any knowledge
of any other frontend framework - you will learn it all throughout this Course!
This course covers it all!
We'll start at the very basics, what Vue.js is and how it works before we move on to more complex and advanced topics but I'll be honest: It's too much to fit it all into one sentence, so here's what you'll learn in this Course:
What
is VueJS and
Why
would you use it?
The
Basics
(including the basic Syntax, Understanding Templates and much more!)
How to Output
Reactive Data
& Listen to
Events
Interacting with DOM
(Rendering Lists, Conditionally attaching/ detaching Elements ...)
Setting up a
Development Environment
and
Workflow
Using
Components
(and what Components are to begin with)
A
Deep Dive Look Behind the Scenes
of Vue
Binding to
Form
Inputs
Sending
Http Requests
to Backend APIs
Authentication
& Vue
How to make your App more Beautiful with
Animations
and
Transitions
How to create an awesome
Single-Page-Application
(SPA) with
Routing
How to improve State Management by using
Vuex
How to
Deploy
the App
And much more!
All these topics are taught with
real examples and demo projects.
This course is full of exercises, challenges and bigger courser projects that allow you to practice what you learned.
Along with
many other smaller projects
, we will build a
couple of bigger main projects
:
The
"Monster Slayer" Game
- a game running in the browser, 100% powered by Vue
The
"Learning Resource Manager"
- a web app that allows you to manage (add, delete, list) your favorite learning resources
The
"Find a Coach" app
- a web app that allows you to sign up / login, register as a coach, list and filter available coaches and send messages to coaches
Is this course for you?
Now that you know what this course is about, let's see if this course is for you!
Here are three types of students who will love this course:
Student #1:
Has some JavaScript experience and is interested in what this language can do. You heard and read that JavaScript allows you to create nice web applications and enhance existing web pages. VueJS is your choice!
Student #2:
You already have some experience with other frontend frameworks like Angular (2+) or ReactJS. But either due to interest or disappointment of the existing frameworks, you seek some alternatives - VueJS might be what you were looking for!
Student #3:
Has experience with backend frameworks/ languages but now also wants to enter the frontend world. VueJS is an awesome choice here, it's fun, it uses native JS and it's extremely powerful!
Bonus: Student #4
Is disappointed by Angular 2+. Does a good framework need 2 hours of setup? No, certainly not - as VueJS will prove to this student!
Let's dive into VueJS right now!
Who this course is for:
This Course is for Everyone interested in Frontend Development and Major JavaScript Frameworks
This Course is for you if you want to create Reactive Applications, which run in the Browser
This Course also targets Students who prefer a native JavaScript Framework which makes Getting Started much simpler than Angular 2
Displeased with Angular 2? VueJS is for you!

What you'll learn

Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones

Understand the Theory behind Vue.js and use it in Real Projects

Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)

Learn the latest version of Vue (Vue 3), including the brand-new Composition API

Requirements

You will need a copy of Adobe XD 2019 or above. A free trial can be downloaded from Adobe.
No previous design experience is needed.
No previous Adobe XD skills are needed.

Course Content

27 sections • 95 lectures

Expand All Sections

1-Getting Started

1.1-Welcome to the Course!

1.2-What is "Vue.js"?

1.3-Different Ways of Using Vue

1.4-Exploring Vue Alternatives

1.5-Building A First App With Just JavaScript

1.6-Join our Online Learning Community

1.7-Important: Changed Vue Script Import Path

1.8-Re-building the App with Vue

1.9-Vue vs "Vanilla JavaScript" (just JavaScript)

1.10-Setting Up the Course Development Environment

1.11-Course Setup

1.12-Course Outline & What's In The Course

1.13-How To Get The Most Out Of This Course

1.14-Module Resources

2-Basics & Core Concepts - DOM Interaction with Vue

2.1-Module Introduction

2.2-Important: Changed Vue Script Import Path

2.3-Creating and Connecting Vue App Instances

2.4-Interpolation and Data Binding

2.5-Binding Attributes with the "v-bind" Directive

2.6-Understanding "methods" in Vue Apps

2.7-Working with Data inside of a Vue App

2.8-Outputting Raw HTML Content with v-html

2.9-A First Summary

2.10-Time to Practice: Data Binding

2.11-Understanding Event Binding

2.12-Events & Methods

2.13-Working with Event Arguments

2.14-Using the Native Event Object

2.15-Exploring Event Modifiers

2.16-Locking Content with v-once

2.17-Time to Practice: Event Binding

2.18-Data Binding + Event Binding = Two-Way Binding

2.19-Methods used for Data Binding: How It Works

2.20-Introducing Computed Properties

2.21-Working with Watchers

2.22-Methods vs Computed Properties vs Watchers

2.23-v-bind and v-on Shorthands

2.24-Time to Practice: Reactivity

2.25-Dynamic Styling with Inline Styles

2.26-Adding CSS Classes Dynamically

2.27-Classes & Computed Properties

2.28-Dynamic Classes: Array Syntax

2.29-Time to Practice: Dynamic Styling

2.30-Module Summary

2.31-Module Resources

3-Rendering Conditional Content & Lists

3.1-Module Introduction

3.2-Understanding the Problem

3.3-Rendering Content Conditionally

3.4-v-if, v-else and v-else-if

3.5-Using v-show Instead Of v-if

3.6-Rendering Lists of Data

3.7-Diving Deeper Into v-for

3.8-Removing List Items

3.9-Lists & Keys

3.10-Time to Practice: Conditional Content & Lists

3.11-Module Summary

3.12-Module Resources

4-Course Project: The Monster Slayer Game

4.1-Module Introduction

4.2-Project Setup & First Methods

4.3-Updating the Health Bars

4.4-Adding a "Special Attack"

4.5-Adding a "Heal" Functionality

4.6-Adding a "Game Over" Screen

4.7-Finishing the Core Functionality

4.8-Adding a Battle Log

4.9-Module Resources

5-Vue: Behind the Scenes

5.1-Module Introduction

5.2-An Introduction to Vue's Reactivity

5.3-Vue Reactivity: A Deep Dive

5.4-One App vs Multiple Apps

5.5-Understanding Templates

5.6-Working with Refs

5.7-How Vue Updates the DOM

5.8-Vue App Lifecycle - Theory

5.9-Vue App Lifecycle - Practice

5.10-Module Resources

6-Introducing Components

6.1-Module Introduction

6.2-Understanding the Problem

6.3-Introducing Components

6.4-The Why: Building Complex User Interfaces With Components

6.5-Multiple Vue Apps vs Multiple Components

6.6-Module Resources

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

7.1-Module Introduction

7.2-Why We Need A Development Server

7.3-Why We Want A Better Developer Experience

7.4-Fixing npm run serve (Vue CLI)

7.5-Installing & Using the Vue CLI

7.6-Inspecting the Created Project

7.7-Inspecting the Vue Code & ".vue" Files

7.8-Adding the "Vetur" Extension to VS Code

7.9-More on ".vue" Files

7.10-A New Vue Project

7.11-Creating a Basic Vue App

7.12-Adding a Component

7.13-Adding Styling

7.14-A Small Addition

7.15-An Alternative Setup - using "npm init" & Volar

7.16-Module Resources

8-Component Communication

8.1-Module Introduction

8.2-Introducing "Props" (Parent => Child Communication)

8.3-Prop Behavior & Changing Props

8.4-Validating Props

8.5-Supported Prop Values

8.6-Working with Dynamic Prop Values

8.7-Emitting Custom Events (Child => Parent Communication)

8.8-Defining & Validating Custom Events

8.9-Prop / Event Fallthrough & Binding All Props

8.10-Demo: Adding Components & Connecting Them

8.11-Demo: Adding More Component Communication

8.12-Time to Practice: Props & Custom Events

8.13-A Potential Problem

8.14-Provide + Inject To The Rescue

8.15-Provide + Inject for Functions / Methods

8.16-Provide + Inject vs Props & Custom Events

8.17-Module Summary

8.18-Module Resources

9-Diving Deeper Into Components

9.1-Module Introduction

9.2-Project Setup

9.3-Global vs Local Components

9.4-Scoped Styles

9.5-Introducing Slots

9.6-Named Slots

9.7-Slot Styles & Compilation

9.8-More on Slots

9.9-Scoped Slots

9.10-Dynamic Components

9.11-Keeping Dynamic Components Alive

9.12-Applying What We Know & A Problem

9.13-Teleporting Elements

9.14-Working with Fragments

9.15-The Vue Style Guide

9.16-Moving to a Different Folder Structure

9.17-Module Summary

9.18-Module Resources

10-Course Project: The Learning Resources App

10.1-Module Introduction

10.2-Setup & First Steps

10.3-First Components & Props

10.4-Styling and More Components

10.5-Header & BaseCard Components

10.6-Adding a Base Button

10.7-Dynamic Components & Attribute Fallthrough

10.8-Adding & Styling Tabs

10.9-Adding a Form

10.10-Fetching User Input

10.11-Adding a Modal Dialog

10.12-Deleting Items

10.13-Adding "Teleport"

10.14-Module Resources

11-Forms

11.1-Module Introduction

11.2-v-model & Inputs

11.3-Working with v-model Modifiers and Numbers

11.4-v-model and Dropdowns

11.5-Using v-model with Checkboxes & Radiobuttons

11.6-Adding Basic Form Validation

11.7-Building a Custom Control Component

11.8-Using v-model on Custom Components

11.9-Module Summary

11.10-Module Resources

12-Sending Http Requests

12.1-Module Introduction

12.2-Starting App & Why we need a Backend

12.3-Adding a Backend

12.4-How To (Not) Send Http Requests

12.5-Sending a POST Request to Store Data

12.6-Http Requests & Http Methods (Verbs)

12.7-Using Axios Instead Of "fetch()"

12.8-Getting Data (GET Request) & Transforming Response Data

12.9-Loading Data When a Component Mounts

12.10-Showing a "Loading..." Message

12.11-Handling the "No Data" State

12.12-Handling Technical / Browser-side Errors

12.13-Handling Error Responses

12.14-Module Summary

12.15-Module Resources

13-Routing: Building "Multi-Page" Single Page Applications

13.1-Module Introduction

13.2-What & Why?

13.3-Routing Setup

13.4-Registering & Rendering Routes

13.5-Navigating with router-link

13.6-Styling Active Links

13.7-Programmatic Navigation

13.8-Passing Data with Route Params (Dynamic Segments)

13.9-Navigation & Dynamic Paths

13.10-A Vue Bug

13.11-Updating Params Data with Watchers

13.12-Passing Params as Props

13.13-Redirecting & "Catch All" Routes

13.14-Using Nested Routes

13.15-More Fun with Named Routes & Location Objects

13.16-Using Query Params

13.17-Rendering Multiple Routes with Named Router Views

13.18-Controlling Scroll Behavior

13.19-Introducing Navigation Guards

13.20-Diving Deeper Into Navigation Guards

13.21-The Global "afterEach" Guard

13.22-Beyond Entering: Route Leave Guards

13.23-Utilizing Route Metadata

13.24-Organizing Route Files

13.25-Summary

13.26-Module Resources

14-Animations & Transitions

14.1-Module Introduction

14.2-Animation Basics & CSS Transitions

14.3-Understanding CSS Animations

14.4-Why Is "Just CSS" Not Enough?

14.5-Playing CSS Animations with Vue's Help

14.6-Using the Transition Component

14.7-CSS Animations with the Transition Component

14.8-Using Custom CSS Class Names

14.9-Example: Animating a Modal

14.10-Transitioning Between Multiple Elements

14.11-Using Transition Events

14.12-Building JavaScript Transitions (instead of CSS)

14.13-Disabling CSS Transitions

14.14-Getting Started with Animated Lists

14.15-Animating Lists with "transition-group"

14.16-Animate List Item Movement

14.17-Animating Route Changes

14.18-An Important Note on Animated Route Changes

14.19-Module Resources

15-Vuex

15.1-Module Introduction

15.2-What & Why?

15.3-Creating & Using a Store

15.4-Connecting Components to State

15.5-Introducing Mutations - A Better Way of Changing Data

15.6-Passing Data to Mutations with Payloads

15.7-Introducing Getters - A Better Way Of Getting Data

15.8-Running Async Code with Actions

15.9-Understanding the Action "Context"

15.10-Using Mapper Helpers

15.11-Example: Adding More State

15.12-Organizing your Store with Modules

15.13-Understanding Local Module State

15.14-Namespacing Modules

15.15-Structuring Vuex Code & Files

15.16-A Challenge!

15.17-Challenge Solution (1/3)

15.18-Challenge Solution (2/3)

15.19-Challenge Solution (3/3)

15.20-Summary

15.21-Module Resources

16-Main Project: "Find a Coach" Web App

16.1-Module Introduction

16.2-Planning the Project / Web App

16.3-Planning the Data Requirements

16.4-Planning the Layout / Components

16.5-Registering Routes

16.6-Adding Route Page Components

16.7-Working on the Main Layout & Styling

16.8-Wiring Up Pages

16.9-Adding Vuex and Coach Data

16.10-Working on the Coaches List and List Items

16.11-Adding a Couple of Base Components (Base Card, Base Button, Base Badge)

16.12-Building the Coach Detail Component

16.13-Filtering Coaches

16.14-Registering as a Coach: The Form

16.15-Adding Coaches to Vuex

16.16-Adding Form Validation

16.17-Working on the Contact Form

16.18-Storing Requests (Messages) With Vuex

16.19-Outputting Incoming Requests (Messages)

16.20-Filtering Requests for the Active Coach

16.21-Sending a PUT Http Request to Store Coach Data

16.22-Fetching Coach Data (GET Http Request)

16.23-Rendering a Loading Spinner

16.24-Adding Http Error Handling

16.25-Sending Coaching Requests Http Requests

16.26-Caching Http Response Data

16.27-Adding Route Transitions

16.28-The "Not Found" Page & Summary

16.29-Module Resources

17-Vue & Authentication

17.1-Module Introduction

17.2-How Authentication Works in Vue Apps (or any SPA)

17.3-Locking / Protecting Backend Resources

17.4-Adding an Authentication Page (Login & Signup)

17.5-Preparing Vuex

17.6-Adding a "Signup" Action & Flow

17.7-Better UX: Loading Spinner & Error Handling

17.8-Adding a "Login" Action & Flow

17.9-Attaching the Token to Outgoing Requests

17.10-Updating the UI Based on Auth State

17.11-Adding a "Logout" Action & Flow

17.12-Authentication & Routing (incl. Navigation Guards)

17.13-Adding "Auto Login"

17.14-Adding "Auto Logout"

17.15-Summary

17.16-Module Resources

18-Optimizing & Deploying Vue Apps

18.1-Module Introduction

18.2-What To Deploy?

18.3-Optimization: Using Asynchronous Components

18.4-Note: Async Components & Routing

18.5-Building the Project For Production

18.6-Deploying a Vue App

18.7-Module Resources

19-The Composition API - Replacing the Options API

19.1-Module Introduction

19.2-Which Problem Does The Composition API Solve?

19.3-Replacing "data" with "refs"

19.4-Replacing the setup() Method

19.5-Building "reactive" Objects

19.6-Reactivity: A Deep Dive

19.7-Replacing "methods" with Regular Functions

19.8-Time to Practice: Data & Functions

19.9-Replacing "Computed Properties" with the "computed" Function

19.10-Two-Way-Binding and the Composition API

19.11-Working with Watchers

19.12-Time to Practice: Composition API Core Building Blocks

19.13-A First Summary

19.14-How To Use Template Refs

19.15-Components, Props & The Composition API

19.16-Emitting Custom Events

19.17-Working with Provide/ Inject

19.18-Lifecycle Hooks in the Composition API

19.19-Migrating from Options API to Composition API - An Example Project

19.20-Migrating a First Component

19.21-Migrating a Big Component

19.22-Migrating the Remaining Components

19.23-Routing, Params & The Composition API

19.24-The Route & Router Objects and the Composition API

19.25-Using Vuex with the Composition API

19.26-Summary

19.27-Module Resources

20-Reusing Functionality: Mixins & Custom Composition Functions

20.1-Module Introduction

20.2-Reusability Concepts

20.3-Using Mixins

20.4-Understanding Mixin Merging

20.5-Global Mixins

20.6-Disadvantages of Mixins

20.7-Custom Hooks / Composables & The Composition API

20.8-More Custom Composition Functions

20.9-Why Hooks / Composables Beat Mixins

20.10-Example: Creating a "Search" Hook

20.11-Custom Hooks Gotchas

20.12-More Thoughts on Custom Hooks / Composables

20.13-Example: A Custom "Sort" Hook

20.14-Module Resources

21-Roundup & Next Steps

21.1-Thanks for being part of the course!

21.2-Course Roundup & Next Steps

22-Vue 2 to Vue 3 Migration

22.1-Vue 3 - Overview

22.2-Important Changes & Migration Steps

22.3-Vue 3: New Features

22.4-The New Composition API (Optional!)

22.5-Further Migration Resources

23-Learn Vue 2

Old Course Content

23.1-Vue 2 Course Content

24-Getting Started [VUE2]

24.1-Time to Practice - Outputting Data to Templates

25-Using VueJS to Interact with the DOM [VUE2]

25.1-Time to Practice - Events;25.2-Time to Practice - Reactive Properties;25.3-Time to Practice - Styling

26-Using Conditionals and Rendering Lists [VUE2]

26.1-Time to Practice - Conditionals & Lists

27-An Introduction to Components [VUE2]

27.1-Time to Practice - Components

28-Communicating between Components [VUE2]

28.1-Time to Practice - Component Communication

29-More Content

29.1-Bonus: More Content!

Course Categories

Popular Courses

Vue - The Complete Guide (incl. Router & Composition API)

Description

What you'll learn

Requirements

Course Content

You May Like