Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Vue JS

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!
Rating: 4.4 out of 54.4 (1,990 ratings)
10,320 students
Created by Stephen Grider
Last updated 2/2021
English
English [Auto], Indonesian [Auto], 
30-Day Money-Back Guarantee

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
Curated for the Udemy for Business collection

Course content

9 sections • 140 lectures • 10h 22m total length

  • Preview01:07
  • Join Our Community!
    00:07
  • Preview08:05
  • Preview03:07
  • Preview02:24
  • Vue Templates and Instances
    04:35
  • Preview02:12
  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • Bonus!
    00:16

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

Featured review

Alex Corvin
Alex Corvin
249 courses
5 reviews
Rating: 5.0 out of 5a year ago
What I enjoyed the most about this course is how thorough Stephen is prefacing the tasks at hand before taking you through any coding. It really paints a clear picture of what you want to do before learning exactly how to do it. It's a fundamental part of any development cycle and his approach in this is so much clearer than I've experienced in any other courses. Fantastic instruction and the course itself is a lot of fun.

Instructor

Stephen Grider
Engineering Architect
Stephen Grider
  • 4.7 Instructor Rating
  • 284,757 Reviews
  • 750,141 Students
  • 29 Courses

Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area.  With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers.  Invest in yourself by learning from Stephen's published courses.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.