Vue The Complete Guide incl Router Composition API

Vue The Complete Guide incl Router Composition API

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

Basic JavaScript Knowledge is Required
ES6 Knowledge is a Plus but not a Must
Basic HTML and CSS Knowledge is assumed throughout the Course

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 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 EventsInteracting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements …)Setting up a Development Environment and WorkflowUsing Components (and what Components are to begin with)A Deep Dive Look Behind the Scenes of VueBinding to Form InputsSending Http Requests to Backend APIsAuthentication & VueHow to make your App more Beautiful with Animations and TransitionsHow to create an awesome Single-Page-Application (SPA) with RoutingHow to improve State Management by using VuexHow to Deploy the AppAnd 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 VueThe “Learning Resource Manager” – a web app that allows you to manage (add, delete, list) your favorite learning resourcesThe “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 coachesIs 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 #4Is 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!

Overview

Section 1: Getting Started

Lecture 1 Welcome to the Course!

Lecture 2 What is “Vue.js”?

Lecture 3 Different Ways of Using Vue

Lecture 4 Exploring Vue Alternatives

Lecture 5 Building A First App With Just JavaScript

Lecture 6 Join our Online Learning Community

Lecture 7 Re-building the App with Vue

Lecture 8 Vue vs “Vanilla JavaScript” (just JavaScript)

Lecture 9 Setting Up the Course Development Environment

Lecture 10 Course Outline & What’s In The Course

Lecture 11 How To Get The Most Out Of This Course

Lecture 12 Module Resources

Section 2: Basics & Core Concepts – DOM Interaction with Vue

Lecture 13 Module Introduction

Lecture 14 Creating and Connecting Vue App Instances

Lecture 15 Interpolation and Data Binding

Lecture 16 Binding Attributes with the “v-bind” Directive

Lecture 17 Understanding “methods” in Vue Apps

Lecture 18 Working with Data inside of a Vue App

Lecture 19 Outputting Raw HTML Content with v-html

Lecture 20 A First Summary

Lecture 21 Understanding Event Binding

Lecture 22 Events & Methods

Lecture 23 Working with Event Arguments

Lecture 24 Using the Native Event Object

Lecture 25 Exploring Event Modifiers

Lecture 26 Locking Content with v-once

Lecture 27 Data Binding + Event Binding = Two-Way Binding

Lecture 28 Methods used for Data Binding: How It Works

Lecture 29 Introducing Computed Properties

Lecture 30 Working with Watchers

Lecture 31 Methods vs Computed Properties vs Watchers

Lecture 32 v-bind and v-on Shorthands

Lecture 33 Dynamic Styling with Inline Styles

Lecture 34 Adding CSS Classes Dynamically

Lecture 35 Classes & Computed Properties

Lecture 36 Dynamic Classes: Array Syntax

Lecture 37 Module Summary

Lecture 38 Module Resources

Section 3: Rendering Conditional Content & Lists

Lecture 39 Module Introduction

Lecture 40 Understanding the Problem

Lecture 41 Rendering Content Conditionally

Lecture 42 v-if, v-else and v-else-if

Lecture 43 Using v-show Instead Of v-if

Lecture 44 Rendering Lists of Data

Lecture 45 Diving Deeper Into v-for

Lecture 46 Removing List Items

Lecture 47 Lists & Keys

Lecture 48 Module Summary

Lecture 49 Module Resources

Section 4: Course Project: The Monster Slayer Game

Lecture 50 Module Introduction

Lecture 51 Project Setup & First Methods

Lecture 52 Updating the Health Bars

Lecture 53 Adding a “Special Attack”

Lecture 54 Adding a “Heal” Functionality

Lecture 55 Adding a “Game Over” Screen

Lecture 56 Finishing the Core Functionality

Lecture 57 Adding a Battle Log

Lecture 58 Module Resources

Section 5: Vue: Behind the Scenes

Lecture 59 Module Introduction

Lecture 60 An Introduction to Vue’s Reactivity

Lecture 61 Vue Reactivity: A Deep Dive

Lecture 62 One App vs Multiple Apps

Lecture 63 Understanding Templates

Lecture 64 Working with Refs

Lecture 65 How Vue Updates the DOM

Lecture 66 Vue App Lifecycle – Theory

Lecture 67 Vue App Lifecycle – Practice

Lecture 68 Module Resources

Section 6: Introducing Components

Lecture 69 Module Introduction

Lecture 70 Understanding the Problem

Lecture 71 Introducing Components

Lecture 72 The Why: Building Complex User Interfaces With Components

Lecture 73 Multiple Vue Apps vs Multiple Components

Lecture 74 Module Resources

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

Lecture 75 Module Introduction

Lecture 76 Why We Need A Development Server

Lecture 77 Why We Want A Better Developer Experience

Lecture 78 Fixing npm run serve (Vue CLI)

Lecture 79 Installing & Using the Vue CLI

Lecture 80 Inspecting the Created Project

Lecture 81 Inspecting the Vue Code & “.vue” Files

Lecture 82 Adding the “Vetur” Extension to VS Code

Lecture 83 More on “.vue” Files

Lecture 84 A New Vue Project

Lecture 85 Creating a Basic Vue App

Lecture 86 Adding a Component

Lecture 87 Adding Styling

Lecture 88 A Small Addition

Lecture 89 An Alternative Setup – using “npm init” & Volar

Lecture 90 Module Resources

Section 8: Component Communication

Lecture 91 Module Introduction

Lecture 92 Introducing “Props” (Parent => Child Communication)

Lecture 93 Prop Behavior & Changing Props

Lecture 94 Validating Props

Lecture 95 Supported Prop Values

Lecture 96 Working with Dynamic Prop Values

Lecture 97 Emitting Custom Events (Child => Parent Communication)

Lecture 98 Defining & Validating Custom Events

Lecture 99 Prop / Event Fallthrough & Binding All Props

Lecture 100 Demo: Adding Components & Connecting Them

Lecture 101 Demo: Adding More Component Communication

Lecture 102 A Potential Problem

Lecture 103 Provide + Inject To The Rescue

Lecture 104 Provide + Inject for Functions / Methods

Lecture 105 Provide + Inject vs Props & Custom Events

Lecture 106 Module Summary

Lecture 107 Module Resources

Section 9: Diving Deeper Into Components

Lecture 108 Module Introduction

Lecture 109 Project Setup

Lecture 110 Global vs Local Components

Lecture 111 Scoped Styles

Lecture 112 Introducing Slots

Lecture 113 Named Slots

Lecture 114 Slot Styles & Compilation

Lecture 115 More on Slots

Lecture 116 Scoped Slots

Lecture 117 Dynamic Components

Lecture 118 Keeping Dynamic Components Alive

Lecture 119 Applying What We Know & A Problem

Lecture 120 Teleporting Elements

Lecture 121 Working with Fragments

Lecture 122 The Vue Style Guide

Lecture 123 Moving to a Different Folder Structure

Lecture 124 Module Summary

Lecture 125 Module Resources

Section 10: Course Project: The Learning Resources App

Lecture 126 Module Introduction

Lecture 127 Setup & First Steps

Lecture 128 First Components & Props

Lecture 129 Styling and More Components

Lecture 130 Header & BaseCard Components

Lecture 131 Adding a Base Button

Lecture 132 Dynamic Components & Attribute Fallthrough

Lecture 133 Adding & Styling Tabs

Lecture 134 Adding a Form

Lecture 135 Fetching User Input

Lecture 136 Adding a Modal Dialog

Lecture 137 Deleting Items

Lecture 138 Adding “Teleport”

Lecture 139 Module Resources

Section 11: Forms

Lecture 140 Module Introduction

Lecture 141 v-model & Inputs

Lecture 142 Working with v-model Modifiers and Numbers

Lecture 143 v-model and Dropdowns

Lecture 144 Using v-model with Checkboxes & Radiobuttons

Lecture 145 Adding Basic Form Validation

Lecture 146 Building a Custom Control Component

Lecture 147 Using v-model on Custom Components

Lecture 148 Module Summary

Lecture 149 Module Resources

Section 12: Sending Http Requests

Lecture 150 Module Introduction

Lecture 151 Starting App & Why we need a Backend

Lecture 152 Adding a Backend

Lecture 153 How To (Not) Send Http Requests

Lecture 154 Sending a POST Request to Store Data

Lecture 155 Http Requests & Http Methods (Verbs)

Lecture 156 Using Axios Instead Of “fetch()”

Lecture 157 Getting Data (GET Request) & Transforming Response Data

Lecture 158 Loading Data When a Component Mounts

Lecture 159 Showing a “Loading…” Message

Lecture 160 Handling the “No Data” State

Lecture 161 Handling Technical / Browser-side Errors

Lecture 162 Handling Error Responses

Lecture 163 Module Summary

Lecture 164 Module Resources

Section 13: Routing: Building “Multi-Page” Single Page Applications

Lecture 165 Module Introduction

Lecture 166 What & Why?

Lecture 167 Routing Setup

Lecture 168 Registering & Rendering Routes

Lecture 169 Navigating with router-link

Lecture 170 Styling Active Links

Lecture 171 Programmatic Navigation

Lecture 172 Passing Data with Route Params (Dynamic Segments)

Lecture 173 Navigation & Dynamic Paths

Lecture 174 A Vue Bug

Lecture 175 Updating Params Data with Watchers

Lecture 176 Passing Params as Props

Lecture 177 Redirecting & “Catch All” Routes

Lecture 178 Using Nested Routes

Lecture 179 More Fun with Named Routes & Location Objects

Lecture 180 Using Query Params

Lecture 181 Rendering Multiple Routes with Named Router Views

Lecture 182 Controlling Scroll Behavior

Lecture 183 Introducing Navigation Guards

Lecture 184 Diving Deeper Into Navigation Guards

Lecture 185 The Global “afterEach” Guard

Lecture 186 Beyond Entering: Route Leave Guards

Lecture 187 Utilizing Route Metadata

Lecture 188 Organizing Route Files

Lecture 189 Summary

Lecture 190 Module Resources

Section 14: Animations & Transitions

Lecture 191 Module Introduction

Lecture 192 Animation Basics & CSS Transitions

Lecture 193 Understanding CSS Animations

Lecture 194 Why Is “Just CSS” Not Enough?

Lecture 195 Playing CSS Animations with Vue’s Help

Lecture 196 Using the Transition Component

Lecture 197 CSS Animations with the Transition Component

Lecture 198 Using Custom CSS Class Names

Lecture 199 Example: Animating a Modal

Lecture 200 Transitioning Between Multiple Elements

Lecture 201 Using Transition Events

Lecture 202 Building JavaScript Transitions (instead of CSS)

Lecture 203 Disabling CSS Transitions

Lecture 204 Getting Started with Animated Lists

Lecture 205 Animating Lists with “transition-group”

Lecture 206 Animate List Item Movement

Lecture 207 Animating Route Changes

Lecture 208 An Important Note on Animated Route Changes

Lecture 209 Module Resources

Section 15: Vuex

Lecture 210 Module Introduction

Lecture 211 What & Why?

Lecture 212 Creating & Using a Store

Lecture 213 Connecting Components to State

Lecture 214 Introducing Mutations – A Better Way of Changing Data

Lecture 215 Passing Data to Mutations with Payloads

Lecture 216 Introducing Getters – A Better Way Of Getting Data

Lecture 217 Running Async Code with Actions

Lecture 218 Understanding the Action “Context”

Lecture 219 Using Mapper Helpers

Lecture 220 Example: Adding More State

Lecture 221 Organizing your Store with Modules

Lecture 222 Understanding Local Module State

Lecture 223 Namespacing Modules

Lecture 224 Structuring Vuex Code & Files

Lecture 225 A Challenge!

Lecture 226 Challenge Solution (1/3)

Lecture 227 Challenge Solution (2/3)

Lecture 228 Challenge Solution (3/3)

Lecture 229 Summary

Lecture 230 Module Resources

Section 16: Main Project: “Find a Coach” Web App

Lecture 231 Module Introduction

Lecture 232 Planning the Project / Web App

Lecture 233 Planning the Data Requirements

Lecture 234 Planning the Layout / Components

Lecture 235 Registering Routes

Lecture 236 Adding Route Page Components

Lecture 237 Working on the Main Layout & Styling

Lecture 238 Wiring Up Pages

Lecture 239 Adding Vuex and Coach Data

Lecture 240 Working on the Coaches List and List Items

Lecture 241 Adding a Couple of Base Components (Base Card, Base Button, Base Badge)

Lecture 242 Building the Coach Detail Component

Lecture 243 Filtering Coaches

Lecture 244 Registering as a Coach: The Form

Lecture 245 Adding Coaches to Vuex

Lecture 246 Adding Form Validation

Lecture 247 Working on the Contact Form

Lecture 248 Storing Requests (Messages) With Vuex

Lecture 249 Outputting Incoming Requests (Messages)

Lecture 250 Filtering Requests for the Active Coach

Lecture 251 Sending a PUT Http Request to Store Coach Data

Lecture 252 Fetching Coach Data (GET Http Request)

Lecture 253 Rendering a Loading Spinner

Lecture 254 Adding Http Error Handling

Lecture 255 Sending Coaching Requests Http Requests

Lecture 256 Caching Http Response Data

Lecture 257 Adding Route Transitions

Lecture 258 The “Not Found” Page & Summary

Lecture 259 Module Resources

Section 17: Vue & Authentication

Lecture 260 Module Introduction

Lecture 261 How Authentication Works in Vue Apps (or any SPA)

Lecture 262 Locking / Protecting Backend Resources

Lecture 263 Adding an Authentication Page (Login & Signup)

Lecture 264 Preparing Vuex

Lecture 265 Adding a “Signup” Action & Flow

Lecture 266 Better UX: Loading Spinner & Error Handling

Lecture 267 Adding a “Login” Action & Flow

Lecture 268 Attaching the Token to Outgoing Requests

Lecture 269 Updating the UI Based on Auth State

Lecture 270 Adding a “Logout” Action & Flow

Lecture 271 Authentication & Routing (incl. Navigation Guards)

Lecture 272 Adding “Auto Login”

Lecture 273 Adding “Auto Logout”

Lecture 274 Summary

Lecture 275 Module Resources

Section 18: Optimizing & Deploying Vue Apps

Lecture 276 Module Introduction

Lecture 277 What To Deploy?

Lecture 278 Optimization: Using Asynchronous Components

Lecture 279 Note: Async Components & Routing

Lecture 280 Building the Project For Production

Lecture 281 Deploying a Vue App

Lecture 282 Module Resources

Section 19: The Composition API – Replacing the Options API

Lecture 283 Module Introduction

Lecture 284 Which Problem Does The Composition API Solve?

Lecture 285 Replacing “data” with “refs”

Lecture 286 Replacing the setup() Method

Lecture 287 Building “reactive” Objects

Lecture 288 Reactivity: A Deep Dive

Lecture 289 Replacing “methods” with Regular Functions

Lecture 290 Replacing “Computed Properties” with the “computed” Function

Lecture 291 Two-Way-Binding and the Composition API

Lecture 292 Working with Watchers

Lecture 293 A First Summary

Lecture 294 How To Use Template Refs

Lecture 295 Components, Props & The Composition API

Lecture 296 Emitting Custom Events

Lecture 297 Working with Provide/ Inject

Lecture 298 Lifecycle Hooks in the Composition API

Lecture 299 Migrating from Options API to Composition API – An Example Project

Lecture 300 Migrating a First Component

Lecture 301 Migrating a Big Component

Lecture 302 Migrating the Remaining Components

Lecture 303 Routing, Params & The Composition API

Lecture 304 The Route & Router Objects and the Composition API

Lecture 305 Using Vuex with the Composition API

Lecture 306 Summary

Lecture 307 Module Resources

Section 20: Reusing Functionality: Mixins & Custom Composition Functions

Lecture 308 Module Introduction

Lecture 309 Reusability Concepts

Lecture 310 Using Mixins

Lecture 311 Understanding Mixin Merging

Lecture 312 Global Mixins

Lecture 313 Disadvantages of Mixins

Lecture 314 Custom Hooks / Composables & The Composition API

Lecture 315 More Custom Composition Functions

Lecture 316 Why Hooks / Composables Beat Mixins

Lecture 317 Example: Creating a “Search” Hook

Lecture 318 Custom Hooks Gotchas

Lecture 319 More Thoughts on Custom Hooks / Composables

Lecture 320 Example: A Custom “Sort” Hook

Lecture 321 Module Resources

Section 21: Roundup & Next Steps

Lecture 322 Thanks for being part of the course!

Lecture 323 Course Roundup & Next Steps

Section 22: Vue 2 to Vue 3 Migration

Lecture 324 Vue 3 – Overview

Lecture 325 Important Changes & Migration Steps

Lecture 326 Vue 3: New Features

Lecture 327 The New Composition API (Optional!)

Lecture 328 Further Migration Resources

Section 23: Learn Vue 2 | Old Course Content

Lecture 329 Vue 2 Course Content

Section 24: Getting Started [VUE2]

Section 25: Using VueJS to Interact with the DOM [VUE2]

Section 26: Using Conditionals and Rendering Lists [VUE2]

Section 27: An Introduction to Components [VUE2]

Section 28: Communicating between Components [VUE2]

Section 29: More Content

Lecture 330 Bonus: More Content!

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!

Course Information:

Udemy | English | 31h 52m | 20.43 GB
Created by: Maximilian Schwarzmüller

You Can See More Courses in the Developer >> Greetings from CourseDown.com