Vue JS Essentials with Vuex and Vue Router

Focused View

Stephen Grider

10:22:03

63 View

01 - An Introduction to Vue

001 How to Get Help.mp4

01:07

002 Course Resources.html

002 diagrams.zip

003 Join Our Community!.html

004 Our First Vue App.mp4

08:05

005 App Overview.mp4

03:07

006 A Codepen Starter.mp4

02:24

007 Vue Templates and Instances.mp4

04:35

008 Creating the Template.mp4

02:12

009 Linking Templates and Instances.mp4

03:50

010 Step by Step Implementation.mp4

03:25

011 Defining Instance Methods.mp4

04:42

012 Defining Vue Directives.mp4

05:12

013 Retrieving Event Information.mp4

02:40

014 Imperative vs Declarative Programming.mp4

10:24

015 Declarative Apps with the Vue API.mp4

05:59

016 Data, Computed, and Methods.mp4

02:43

017 Updated Data Values.mp4

04:32

018 Computed Properties.mp4

05:34

019 Review from Start to Finish.mp4

04:53

020 Template Placement.mp4

03:50

021 Referencing Data in the Template.mp4

03:44

022 Expressions in Templates.mp4

05:50

023 Exercise Solution.mp4

01:46

024 Exercise Solution.mp4

02:25

02 - Moving on with Vue CLI

001 App Overview.mp4

02:08

002 App Challenges.mp4

03:29

003 Generating a New Project.mp4

02:32

004 Why Use Vue CLI.mp4

04:01

005 Project Walkthrough.mp4

04:27

006 Vue Files.mp4

04:42

007 Behind the Scenes of Vue Files.mp4

04:48

008 Vue Components vs Vue Instances.mp4

05:23

03 - Writing Effective Vue Apps

001 Starting from Scratch.mp4

05:37

002 The App Component.mp4

03:43

003 Another Way of Specifying Content.mp4

04:01

004 Multiple Ways of DOM Attachment.mp4

05:05

005 Making the SearchBar.mp4

02:19

006 Nesting Components.mp4

04:07

007 Event Directives.mp4

02:10

008 Shorthand Event Syntax.mp4

02:09

009 Data Sharing Between Components.mp4

03:46

010 Communication with Props and Events.mp4

02:17

011 Emitting Events.mp4

03:10

012 Listening for Custom Events.mp4

04:48

013 Youtube API Signup.mp4

05:28

014 Searching Youtube.mp4

05:11

015 Investigating Video Responses.mp4

02:38

016 Rendering a List of Videos.mp4

04:05

017 Updating Data Causes Rerenders.mp4

03:21

018 Data in Components vs Instances.mp4

04:11

019 Updating Data.mp4

05:07

020 Communicating from Parent to Child.mp4

06:54

021 Prop Validation.mp4

05:41

022 Separate List Components.mp4

04:20

023 Lists with V-For.mp4

03:49

024 Handling Props with V-For.mp4

06:20

025 Keys with V-For.mp4

03:04

026 Including Bootstrap Styling.mp4

02:11

027 Styling the Search Bar.mp4

03:56

028 Styling the Video List.mp4

02:38

029 Thumbnail Image Reference.mp4

05:31

030 Thumbnail By Computed Property.mp4

04:34

031 More List Item Styling.mp4

05:29

032 Handling Nested Clicks.mp4

04:23

033 Event Handling in the VideoList.mp4

04:49

034 Receiving Events in the App.mp4

03:04

035 Passing Props to the Video Detail.mp4

04:56

036 Updating Data.mp4

05:06

037 The V-If Directive.mp4

04:01

038 Referencing Video Title and Description.mp4

04:18

039 Crafting the Embed URL.mp4

07:40

040 Responsive Embeds.mp4

02:27

041 Two Column Layout.mp4

03:18

042 App Review.mp4

02:46

043 Exercise Solution.mp4

01:50

044 Exercise Solution.mp4

03:08

04 - Handling State with Vuex

001 App Overview.mp4

02:44

002 App Challenges.mp4

05:08

003 Additional Dependencies.mp4

01:14

004 A Bit of Boilerplate.mp4

04:23

005 Building the Header.mp4

04:08

006 Including Semantic UI.mp4

05:31

007 Styling the Header.mp4

05:44

008 Imgur Overview.mp4

03:55

05 - Authentication in Vue with OAuth2

001 OAuth Overview.mp4

05:24

002 Imgur API Signup.mp4

06:51

003 Handling App Logic.mp4

05:52

004 Vuex Introduction.mp4

03:28

005 Vuex Modules.mp4

11:51

006 Connecting Vuex to Vue.mp4

06:41

007 Initial Auth Module Design.mp4

06:39

008 Auth Module Mutations.mp4

07:10

009 Auth Module State and Getters.mp4

06:53

010 Updating State Values.mp4

03:10

011 Logging Out with Actions.mp4

04:32

012 Separate API Helpers.mp4

08:06

013 Forming the OAuth2 URL.mp4

08:13

014 Initiating the Login Flow.mp4

03:32

015 Wiring in the Auth Module.mp4

03:39

016 Initial OAuth Request.mp4

13:16

017 Extracting the Access Token.mp4

04:35

06 - Navigation with Vue Router

001 Wiring up Vue Router.mp4

07:08

002 Browser vs Hash Routers.mp4

04:59

003 Component Insertion Point.mp4

02:30

004 Component Lifecycle Methods.mp4

06:52

005 Calling Actions.mp4

03:21

006 Parsing the Access Token.mp4

06:19

007 Data in Components with MapGetters.mp4

06:45

008 The V-Else Directive.mp4

05:40

009 Persisting Login State.mp4

06:27

010 Button Styling.mp4

03:15

011 Logging Out Users.mp4

02:40

012 Automatic Component Updates.mp4

01:52

013 Clearing LocalStorage Tokens.mp4

02:24

014 Programmatic Navigation.mp4

07:21

015 Additional Route Config.mp4

04:40

016 Navigation with Router-Link.mp4

06:16

07 - Design of Vuex Modules

001 Image Module Deisgn.mp4

08:23

002 Module Implementation.mp4

03:51

003 Fetch Images API Documentation.mp4

02:33

004 Fetching Images.mp4

05:32

005 Communicating Across Modules.mp4

06:32

006 Testing Images Reponse.mp4

07:22

007 Image Upload via Imgur.mp4

03:37

008 Committing Images to State.mp4

03:10

009 Mapping the Images Getter.mp4

02:50

010 Listing Images.mp4

02:40

08 - Handling Image Upload

001 Image Upload Overview.mp4

03:06

002 Upload Form HTML.mp4

04:52

003 Styling the Upload Form.mp4

06:29

004 The Upload Images Action.mp4

02:29

005 File Change Event.mp4

02:55

006 Accepting Multiple Image Files.mp4

06:13

007 The Path to Upload.mp4

03:44

008 Attaching Images with FormData.mp4

07:20

009 Concurrent Uploads.mp4

05:44

010 Layout with CSS Grid.mp4

03:05

011 Hide Images on Logout.mp4

02:27

012 Expanding the App.mp4

02:06

09 - Extras

001 Bonus!.html

Description

Have limited time to learn Vue, Vuex, and Vue Router? Take this course and learn Vue in 11 hours!

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

Who is this for?

Engineers looking to harness the power of Vue

Beginners learning about web development

What You Need to Know?

Basic knowledge of Javascript

More details

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

User Reviews

Rating

average 0

Total votes0

Focused display

Vue JS

Stephen Grider

Instructor's 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

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.