Vue JS Essentials with Vuex and Vue Router
4.6 (1,602 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
8,450 students enrolled

Vue JS Essentials with Vuex and Vue Router

Have limited time to learn Vue, Vuex, and Vue Router? Take this course and learn Vue in 11 hours!
4.6 (1,602 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
8,450 students enrolled
Created by Stephen Grider
Last updated 7/2020
English
English [Auto], Indonesian [Auto], 3 more
  • Polish [Auto]
  • Romanian [Auto]
  • Thai [Auto]
Current price: $83.99 Original price: $119.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10.5 hours on-demand video
  • 2 articles
  • 5 coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Understand how to create interesting Vue applications
  • Use Vuex to manage and update data stored in application state
  • Navigate users between pages using Vue Router
  • Authenticate users with an advanced OAuth2 flow
  • Build beautiful drag and drop image upload
  • Style content intelligently using CSS Grids
Course content
Expand all 139 lectures 10:22:18
+ An Introduction to Vue
23 lectures 01:33:02
Vue Templates and Instances
04:35
Linking Templates and Instances
03:50
Step by Step Implementation
03:25
Defining Instance Methods
04:42
Defining Vue Directives
05:12
Retrieving Event Information
02:40
Imperative vs Declarative Programming
10:24
Declarative Apps with the Vue API
05:59
Data, Computed, and Methods
02:43
Updated Data Values
04:32
Computed Properties
05:34
Review from Start to Finish
04:53
Template Placement
03:50
Referencing Data in the Template
03:44
Expressions in Templates
05:50
Rendering with String Templates
1 question
Exercise Solution
01:46
JS Expressions in Templates
1 question
Exercise Solution
02:25
Course Repo
00:03
+ Moving on with Vue CLI
8 lectures 31:30
App Overview
02:08
App Challenges
03:29
Generating a New Project
02:32
Why Use Vue CLI?
04:01
Project Walkthrough
04:27
Vue Files
04:42
Behind the Scenes of Vue Files
04:48
Vue Components vs Vue Instances
05:23
+ Writing Effective Vue Apps
44 lectures 02:59:26
Starting from Scratch
05:37
The App Component
03:43
Another Way of Specifying Content
04:01
Multiple Ways of DOM Attachment
05:05
Making the SearchBar
02:19
Nesting Components
04:07
Event Directives
02:10
Shorthand Event Syntax
02:09
Data Sharing Between Components
03:46
Communication with Props and Events
02:17
Emitting Events
03:10
Listening for Custom Events
04:48
Youtube API Signup
05:28
Searching Youtube
05:11
Investigating Video Responses
02:38
Rendering a List of Videos
04:05
Updating Data Causes Rerenders
03:21
Data in Components vs Instances
04:11
Updating Data
05:07
Communicating from Parent to Child
06:54
Prop Validation
05:41
Separate List Components
04:20
Lists with V-For
03:49
Handling Props with V-For
06:20
Keys with V-For
03:04
Including Bootstrap Styling
02:11
Styling the Search Bar
03:56
Styling the Video List
02:38
Thumbnail Image Reference
05:31
Thumbnail By Computed Property
04:34
More List Item Styling
05:29
Handling Nested Clicks
04:23
Event Handling in the VideoList
04:49
Receiving Events in the App
03:04
Passing Props to the Video Detail
04:56
Updating Data
05:06
The V-If Directive
04:01
Referencing Video Title and Description
04:18
Crafting the Embed URL
07:40
Responsive Embeds
02:27
Two Column Layout
03:18
App Review
02:46
Events and Methods
1 question
Exercise Solution
01:50
Component Data
1 question
Exercise Solution
03:08
Events, Data, and Directives
1 question
+ Handling State with Vuex
8 lectures 32:47
App Overview
02:44
App Challenges
05:08
Additional Dependencies
01:14
A Bit of Boilerplate
04:23
Building the Header
04:08
Including Semantic UI
05:31
Styling the Header
05:44
Imgur Overview
03:55
+ Authentication in Vue with OAuth2
17 lectures 01:49:51
OAuth Overview
05:24
Imgur API Signup
06:51
Handling App Logic
05:52
Vuex Introduction
03:28
Vuex Modules
11:50
Connecting Vuex to Vue
06:41
Initial Auth Module Design
06:39
Auth Module Mutations
07:10
Auth Module State and Getters
06:53
Updating State Values
03:10
Logging Out with Actions
04:32
Separate API Helpers
08:06
Forming the OAuth2 URL
08:13
Initiating the Login Flow
03:32
Wiring in the Auth Module
03:39
Initial OAuth Request
13:16
Extracting the Access Token
04:35
+ Navigation with Vue Router
16 lectures 01:18:28
Wiring up Vue Router
07:08
Browser vs Hash Routers
04:59
Component Insertion Point
02:30
Component Lifecycle Methods
06:52
Calling Actions
03:21
Parsing the Access Token
06:19
Data in Components with MapGetters
06:45
The V-Else Directive
05:40
Persisting Login State
06:27
Button Styling
03:15
Logging Out Users
02:40
Automatic Component Updates
01:52
Clearing LocalStorage Tokens
02:24
Programmatic Navigation
07:20
Additional Route Config
04:40
Navigation with Router-Link
06:16
+ Design of Vuex Modules
10 lectures 46:30
Image Module Deisgn
08:23
Module Implementation
03:51
Fetch Images API Documentation
02:33
Fetching Images
05:32
Communicating Across Modules
06:32
Testing Images Reponse
07:22
Image Upload via Imgur
03:37
Committing Images to State
03:10
Mapping the Images Getter
02:50
Listing Images
02:40
+ Handling Image Upload
12 lectures 50:29
Image Upload Overview
03:06
Upload Form HTML
04:52
Styling the Upload Form
06:29
The Upload Images Action
02:29
File Change Event
02:55
Accepting Multiple Image Files
06:13
The Path to Upload
03:44
Attaching Images with FormData
07:20
Concurrent Uploads
05:43
Layout with CSS Grid
03:05
Hide Images on Logout
02:27
Expanding the App
02:06
Requirements
  • Basic knowledge of Javascript
Description

State management with Vuex? Yep.  Drag and drop image upload? Covered!  Authentication with OAuth2?   Its here!

If you're looking to learn Vue, Vuex, and Vue Router in record time you're in the right place!  I built this course to help you understand Vue in a fraction of the time that other courses requires.  You'll find absolutely no filler content here, only direct, accurate, and concise explanations of exactly how Vue works.

Vue is an extremely popular front end Javascript framework made for developing dynamic and interactive web apps.  Vue has grown tremendously in popularity in the last few years, and is poised to overtake even React and Angular as the king of all web frameworks.  The secret of Vue is its simplicity - a little bit of knowledge of how Vue works goes a long way!  To help you master Vue, I built this course specifically tailored to be completed in the smallest amount of time possible.  No time is spent with unnecessary or unimportant topics, only the most relevant information is presented.

In just 11 hours, you can become a master of Vue!  

Vue can be used by itself, but it gets even better when used with Vuex and Vue Router as well.  Vuex is a state management framework, which is used to fetch, store, and move data around your application.  In this course, you'll get a deep understanding of how Vuex works and how it works so well with Vue by getting plenty of practice fetching data, storing it, and then retrieving it for use inside of a Vue application.  Vue Router is used to navigate users around to different pages in a single page application.  Vue Router is incredibly simple to get started with - you'll master its inner workings after I show you one simple example.

Throughout this course, you'll get practical experience with the following:

  • Producing dynamic, responsive applications using Vue
  • Upload images to a remote server using drag and drop image upload
  • Log users into your app using OAuth2 Authentication
  • Use a cutting edge project boilerplate with Vue CLI
  • Reduce the amount of code you write using Template Directives
  • Communicate between components using Props and Events
  • Update Vue components using reactive data properties
  • Progamatically navigate users around your application using Vue Router
  • Model application data using the powerful Vuex framework
  • Persist information stored in your app using Local Storage
  • Develop a master-level understanding of the differences between imperative and declarative programming
  • Learn how Vue gives developers multiple tools to accomplish task, and know which the best is for you

All of these topics are communicated with the utmost respect for your learning time.  Every section has been written and re-written to be as concise as possible.  If you want to learn Vue as fast as possible then look no further!  Sign up today and master Vue!

Who this course is for:
  • Engineers looking to harness the power of Vue
  • Beginners learning about web development