Building Frontend Applications with Vue JS

Get ready for your exam by enrolling in our comprehensive training course. This course includes a full set of instructional videos designed to equip you with in-depth knowledge essential for passing the certification exam with flying colors.

$14.99 / $24.99

Getting Started

1. Course Introduction
3m 9s
2. Let's Create our First VueJS Application
4m 45s
3. Extending the VueJS Application
4m 12s
4. Course Structure
3m 44s
5. Take Advantage of all Course Resources!
1m 56s
6. Setup VueJS Locally
2m 3s

Using VueJS to Interact with the DOM

1. Module Introduction
45s
2. Understanding VueJS Templates
2m 35s
3. How the VueJS Template Syntax and Instance Work Together
2m 42s
4. Accessing Data in the Vue Instance
1m 49s
5. Binding to Attributes
2m 43s
6. Understanding and Using Directives
1m 27s
7. Disable Re-Rendering with v-once
1m 41s
8. How to Output Raw HTML
2m 43s
9. Listening to Events
1m 50s
10. Getting Event Data from the Event Object
2m 36s
11. Passing your own Arguments with Events
1m 53s
12. Modifying an Event - with Event Modifiers
3m 23s
13. Listening to Keyboard Events
2m 3s
14. Writing JavaScript Code in the Templates
3m 19s
15. Using Two-Way-Binding
1m 49s
16. Reacting to Changes with Computed Properties
9m 32s
17. An Alternative to Computed Properties: Watching for Changes
3m 53s
18. Saving Time with Shorthands
1m 26s
19. Dynamic Styling with CSS Classes - Basics
4m 22s
20. Dynamic Styling with CSS Classes - Using Objects
1m 36s
21. Dynamic Styling with CSS Classes - Using Names
3m 27s
22. Setting Styles Dynamically (without CSS Classes)
3m 15s
23. Styling Elements with the Array Syntax
1m 14s
24. Module Wrap Up
44s

Using Conditionals and Rendering Lists

1. Module Introduction
49s
2. Conditional Rendering with v-if
3m 38s
3. Using an Alternative v-if Syntax
1m 36s
4. Don't Detach it with v-show
1m 43s
5. Rendering Lists with v-for
2m 26s
6. Getting the Current Index
1m 51s
7. Using an Alternative v-for Syntax
1m 10s
8. Looping through Objects
4m 44s
9. Looping through a List of Numbers
57s
10. Keeping Track of Elements when using v-for
4m 8s
11. Module Wrap Up
51s

First Course Project - The Monster Slayer

1. Introduction & Challenge
2m 54s
2. Setting up the Course Project
2m 37s
3. Creating the Vue Instance and Styling the Healthbars
5m 16s
4. Showing the Player Controls Conditionally
2m 2s
5. Implementing a "Start Game" Method
1m 53s
6. Implementing a "Attack" Method
8m 3s
7. Write better Code - Time for Refactoring!
4m 52s
8. Implementing a "Special Attack"
2m 11s
9. Implementing a "Heal" Method
2m 21s
10. Finishing the Action Buttons
59s
11. Creating an Action Log
2m 41s
12. Printing the Log (v-for)
2m 20s
13. Finishing the Log
1m 57s
14. Styling the Log Conditionally
1m 44s
15. Wrap Up
1m 28s

Understanding the VueJS Instance

1. Module Introduction
1m 4s
2. Some Basics about the VueJS Instance
2m 58s
3. Using Multiple Vue Instances
2m 52s
4. Accessing the Vue Instance from Outside
3m 29s
5. How VueJS manages your Data and Methods
4m 1s
6. A Closer Look at $el and $data
4m 55s
7. Placing $refs and Using them on your Templates
5m 48s
8. Where to learn more about the Vue API
58s
9. Mounting a Template
6m 42s
10. Using Components
4m 56s
11. Limitations of some Templates
2m 35s
12. How VueJS Updates the DOM
3m 25s
13. The VueJS Instance Lifecycle
3m 12s
14. The VueJS Instance Lifecycle in Practice
5m 39s
15. Module Wrap Up
55s

Moving to a "Real" Development Workflow with Webpack and Vue CLI

1. Module Introduction
1m 34s
2. Why do we need a Development Server?
2m 47s
3. What does "Development Workflow" mean?
3m 51s
4. Using the Vue CLI to create Projects
2m 35s
5. Installing the Vue CLI and Creating a new Project
4m 18s
6. An Overview over the Webpack Template Folder Structure
3m 40s
7. Understanding ".vue" Files
6m 46s
8. Understanding the Object in the Vue File
1m 11s
9. How to Build your App for Production
49s
10. Module Wrap Up
1m 11s

An Introduction to Components

1. Module Introduction
1m 4s
2. An Introduction to Components
4m 56s
3. Storing Data in Components with the Data Method
4m 4s
4. Registering Components Locally and Globally
2m 50s
5. The "Root Component" in the App.vue File
3m 21s
6. Creating a Component
4m 24s
7. Using Components
5m 32s
8. Moving to a Better Folder Structure
2m 43s
9. How to Name your Component Tags (Selectors)
4m 31s
10. Scoping Component Styles
5m 5s
11. Module Wrap Up
50s

Communicating between Components

1. Module Introduction
46s
2. Communication Problems
2m 52s
3. Using Props for Parent => Child Communication
3m 10s
4. Naming "props"
1m 10s
5. Using "props" in the Child Component
1m 28s
6. Validating "props"
4m 57s
7. Using Custom Events for Child => Parent Communication
5m 55s
8. Understanding Unidirectional Data Flow
1m 7s
9. Communicating with Callback Functions
2m 23s
10. Communication between Sibling Components
6m 25s
11. Using an Event Bus for Communication
5m 32s
12. Centralizing Code in an Event Bus
2m 14s
13. Wrap Up
41s

Advanced Component Usage

1. Module Introduction
38s
2. Setting up the Module Project
3m
3. Passing Content - The Suboptimal Solution
2m 19s
4. Passing Content with Slots
42s
5. How Slot Content gets Compiled and Styled
3m 3s
6. Using Multiple Slots (Named Slots)
2m 50s
7. Default Slots and Slot Defaults
2m 1s
8. A Summary on Slots
45s
9. Switching Multiple Components with Dynamic Components
5m 31s
10. Understanding Dynamic Component Behavior
2m 7s
11. Keeping Dynamic Components Alive
58s
12. Dynamic Component Lifecycle Hooks
1m 18s
13. Wrap Up
1m 11s

Second Course Project - Wonderful Quotes

1. Module Introduction
1m 36s
2. Setting up the Project
1m 22s
3. Initializing the Application
1m 28s
4. Creating the Application Components
4m 4s
5. Passing Data with Props and Slots
2m 13s
6. Allowing Users to Create Quotes with a NewQuote Component
4m 8s
7. Adding Quotes with Custom Events
3m 34s
8. Adding a Info Box
1m 6s
9. Allowing for Quote Deletion
3m 40s
10. Controlling Quotes with a Progress Bar
3m 52s
11. Finishing Touches and State Management
2m 13s

Handling User Input with Forms

1. Module Introduction
54s
2. A Basic 'input' Form Binding
3m 46s
3. Grouping Data and Pre-Populating Inputs
2m 42s
4. Modifying User Input with Input Modifiers
2m 58s
5. Binding 'textarea' and Saving Line Breaks
2m 53s
6. Using Checkboxes and Saving Data in Arrays
4m 5s
7. Using Radio Buttons
2m 30s
8. Handling Dropdowns with 'select' and 'option'
5m 9s
9. What v-model does and How to Create a Custom Control
2m 49s
10. Creating a Custom Control (Input)
5m 13s
11. Submitting a Form
2m 8s
12. Wrap Up
43s

Using and Creating Directives

1. Module Introduction
53s
2. Understanding Directives
3m 34s
3. How Directives Work - Hook Functions
2m 28s
4. Creating a Simple Directive
1m 22s
5. Passing Values to Custom Directives
1m 8s
6. Passing Arguments to Custom Directives
2m 40s
7. Modifying a Custom Directive with Modifiers
2m 25s
8. Custom Directives - A Summary
28s
9. Registering Directives Locally
1m 37s
10. Using Multiple Modifiers
4m 27s
11. Passing more Complex Values to Directives
2m 13s
12. Wrap Up
44s

Improving your App with Filters and Mixins

1. Module Introduction
45s
2. Creating a Local Filter
4m 32s
3. Global Filters and How to Chain Multiple Filters
1m 45s
4. An (often-times better) Alternative to Filters: Computed Properties
5m 15s
5. Understanding Mixins
2m 23s
6. Creating and Using Mixins
2m 25s
7. How Mixins get Merged
2m 58s
8. Creating a Global Mixin (Special Case!)
3m 26s
9. Mixins and Scope
2m 33s
10. Wrap Up
1m 56s

Adding Animations and Transitions

1. Module Introduction
1m 8s
2. Understanding Transitions
1m 1s
3. Preparing Code to use Transitions
3m 11s
4. Setting Up a Transition
3m 9s
5. Assigning CSS Classes for Transitions
2m 27s
6. Creating a "Fade" Transition with the CSS Transition Property
3m 21s
7. Creating a "Slide" Transition with the CSS Animation Property
3m 59s
8. Mixing Transition and Animation Properties
3m 31s
9. Animating v-if and v-show
33s
10. Setting Up an Initial (on-load) Animation
1m 30s
11. Using Different CSS Class Names
4m 1s
12. Using Dynamic Names and Attributes
2m 33s
13. Transitioning between Multiple Elements (Theory)
34s
14. Transitioning between Multiple Elements (Practice)
4m 42s
15. Listening to Transition Event Hooks
2m 6s
16. Understanding JavaScript Animations
8m 3s
17. Excluding CSS from your Animation
1m 28s
18. Creating an Animation in JavaScript
6m 18s
19. Animating Dynamic Components
5m 57s
20. Animating Lists with 'transition-group'
44s
21. Using 'transition-group' - Preparations
4m 20s
22. Using 'transition-group' to Animate a List
6m 12s
23. Understanding the App
1m 15s
24. Creating the App
12m 4s
25. Adding Animations
6m 38s
26. Wrap Up
1m 3s

Connecting to Servers via Http - Using vue-resource

1. Module Introduction
1m 42s
2. Accessing Http via vue-resource - Setup
4m
3. Creating an Application and Setting Up a Server (Firebase)
5m 24s
4. POSTing Data to a Server (Sending a POST Request)
6m 10s
5. GETting and Transforming Data (Sending a GET Request)
6m 54s
6. Configuring vue-resource Globally
2m 48s
7. Intercepting Requests
3m 34s
8. Intercepting Responses
2m 51s
9. Where the "resource" in vue-resource Comes From
4m 42s
10. Creating Custom Resources
2m 39s
11. Resources vs "Normal" Http Requests
28s
12. Understanding Template URLs
5m 6s
13. Wrap Up
1m 42s

Routing in a VueJS Application

1. Module Introduction
1m 38s
2. Setting up the VueJS Router (vue-router)
2m 16s
3. Setting Up and Loading Routes
6m 43s
4. Understanding Routing Modes (Hash vs History)
4m 14s
5. Navigating with Router Links
3m 45s
6. Where am I? - Styling Active Links
3m 20s
7. Navigating from Code (Imperative Navigation)
2m 42s
8. Setting Up Route Parameters
1m 59s
9. Fetching and Using Route Parameters
2m 3s
10. Reacting to Changes in Route Parameters
3m 4s
11. Setting Up Child Routes (Nested Routes)
4m 39s
12. Navigating to Nested Routes
3m 9s
13. Making Router Links more Dynamic
2m 4s
14. A Better Way of Creating Links - With Named Routes
3m 21s
15. Using Query Parameters
2m 54s
16. Multiple Router Views (Named Router Views)
3m 27s
17. Redirecting
2m 13s
18. Setting Up "Catch All" Routes / Wildcards
1m 6s
19. Animating Route Transitions
2m 34s
20. Passing the Hash Fragment
3m 28s
21. Controlling the Scroll Behavior
3m 21s
22. Protecting Routes with Guards
1m 13s
23. Using the "beforeEnter" Guard
7m 51s
24. Using the "beforeLeave" Guard
3m 31s
25. Loading Routes Lazily
7m 8s
26. Wrap Up
1m 2s

Better State Management with Vuex

1. Module Introduction
1m 12s
2. Why a Different State Management May Be Needed
2m 25s
3. Understanding "Centralized State"
1m 32s
4. Using the Centralized State
6m 49s
5. Why a Centralized State Alone Won't Fix It
2m 41s
6. Understanding Getters
48s
7. Using Getters
2m 40s
8. Mapping Getters to Properties
6m 57s
9. Understanding Mutations
1m 14s
10. Using Mutations
4m 51s
11. Why Mutations have to run Synchronously
1m 34s
12. How Actions improve Mutations
1m 32s
13. Using Actions
4m 59s
14. Mapping Actions to Methods
4m 58s
15. A Summary of Vuex
4m 14s
16. Two-Way-Binding (v-model) and Vuex
5m 56s
17. Improving Folder Structures
1m 1s
18. Modularizing the State Management
4m 56s
19. Using Separate Files
4m 18s
20. Using Namespaces to Avoid Naming Problems
6m 44s
21. Wrap Up
50s

Final Project - The Stock Trader

1. Project Introduction
3m 11s
2. Project Setup and Planning
2m 45s
3. Creating the First Components
2m 55s
4. Setup Project Routes
4m 42s
5. Adding a Header and Navigation
6m 44s
6. Planning the Next Steps
1m 22s
7. Creating Stocks Components
6m 31s
8. Adding a "Buy" Button
5m 57s
9. Setting up the Vuex State Management
10m 21s
10. Adding a Portfolio Module to Vuex
10m 2s
11. Working on the Portfolio Stocks
6m 51s
12. Connecting the Portfolio with Vuex
2m 21s
13. Time to fix some Errors
2m
14. Displaying the Funds
3m 41s
15. Adding some Order Checks
5m 41s
16. Making Funds Look Nicer with Filters
1m 48s
17. Ending the Day - Randomizing Stocks
5m 30s
18. Animating the Route Transitions
3m 14s
19. Saving & Fetching Data - Adding a Dropdown
2m 17s
20. Setting up vue-resource and Firebase
2m 16s
21. Saving Data (PUT Request)
2m 51s
22. Fetching Data (GET Request)
5m 4s
23. Testing and Bug Fixes
2m 50s
24. Project Wrap Up
1m 22s
25. Bonus: Debugging Vuex with Vue Developer Tools
1m 59s

Deploying a VueJS Application

1. Module Introduction
1m 12s
2. Preparing for Deployment
1m 45s
3. Deploying the App (Example: AWS S3)
5m 57s

Course Roundup

1. Courses Roundup
59s

All Course Exercises ("Time to Practice")

1. Time to Practice (1) - Outputting Data to Templates (Problem)
1m 59s
2. Time to Practice (1) - Outputting Data to Templates (Solution)
6m 12s
3. Time to Practice (2) - Events (Problem)
1m 42s
4. Time to Practice (2) - Events (Solution)
4m 54s
5. Time to Practice (3) - Reactive Properties (Problem)
2m 29s
6. Time to Practice (3) - Reactive Properties (Solution)
5m 47s
7. Time to Practice (4) - Styling (Problem)
3m 49s
8. Time to Practice (4) - Styling (Solution)
18m 17s
9. Time to Practice (5) - Conditionals and Lists (Problem)
1m 40s
10. Time to Practice (5) - Conditionals and Lists (Solution)
9m 38s
11. Time to Practice (6) - Components (Problem)
1m 45s
12. Time to Practice (6) - Components (Solution)
2m 12s
13. Time to Practice (7) - Component Communication (Problem)
3m 6s
14. Time to Practice (7) - Component Communication (Solution)
10m 17s
15. Time to Practice (8) - Slots and Dynamic Components (Problem)
1m 27s
16. Time to Practice (8) - Slots and Dynamic Components (Solution)
3m
17. Time to Practice (9) - Forms (Problem)
1m 30s
18. Time to Practice (9) - Forms (Solution)
15m 17s
19. Time to Practice (10) - Directives (Problem)
54s
20. Time to Practice (10) - Directives (Solution)
5m 55s
21. Time to Practice (11) - Filters and Mixins (Problem)
1m 8s
22. Time to Practice (11) - Filters and Mixins (Solution)
8m 12s