Vue.js Fundamentals

Overview

Learn everything you need to know to get started with Vue.js components. Web components are custom developer defined HTML elements, like <p>,<body>, or <button>, that allows us to encapsulate some functionality of our applications. Components are the puzzle pieces of a Vue.js website. Components combine blocks of HTML, JavaScript, and CSS. And as a result, they allow us to easily encapsulate and reuse functionality in our applications.

Learning Objectives

The idea behind components and how Vue.js components work
Component's template, and multiple ways to define your template
Communication between components with props and custom events
What is the true difference between global and local component registration
The lifecycle hooks of a component
Component composition with nested components and slots
Component's best practices and common pitfalls

Course duration

2 Days

Course outline

1 Component Basics

Introduction to Components
Component's Template
Reusable Components with Props
Nested Components
Global vs Local Components
Communication Between Components

2 Components In-depth

Component Naming Best Practices
Component Lifecycle Hooks
Component Slots

3 Vue.js Component Exercises

#1 Build a GitHub User Profile Component
#2 Create a Notification Message Component

4 Learn Vue.js Component Testing

Installing Vue Test Utils
Mounting Components with Vue Test Utils
The Wrapper Object
Learn How To Test Computed Properties and Watchers
Learn How To Test Vue.js Methods
Learn How to Test Vue.js Lifecycle Methods
Traversing The DOM
How to Stub a Vue.js Child Component
How to test that a Vuex Store is injected into a Vue.js component

5 Introduction to Vue Router

Vue Router overview
Create a new project with Vue Router using the Vue CLI UI
Understanding how Vue Router is setup

6 Vue Router Fundamentals

Creating Routes
How to lazy load routes with Vue Router
Vue Router Active Class
Vue Router Named Routes and Params
Vue Router Dynamic Routes
How to rerender components when vue router params changes
How to pass Vue Router params as props to components
Vue Router Nested Routes

7 Vue Router Embellishments

Creating a Go-Back button
How to create route transitions with Vue Router
How to create a 404 Not Found route and page with Vue Router