Introducing the vue-router

Get your learning on with The Vue.js Master Class!

Enroll today and get access to all lessons!

Already a user? Sign in

Introducing the vue-router

Introducing the vue-router

Source Code Download Lesson

The vue-router is the official Vue.js router plugin which makes it super simple to create single page applications with Vue.js.

In this lesson, we’ll introduce the router, learn to map an URL to a component and then take a look at route validation with props.

The Vue.js Master Class

Getting Started

What do I need?

1:44
Get started with the mighty Vue CLI

3:11
Scaffold your project with Vue CLI

3:55
Explore the Webpack template

3:34
Automatic Code Review, Linting with ESLint

7:05

Application Structure

Structuring our data

6:25
Import data source and show the conversations

3:57
Vue.js with a Theme and Scoped CSS Styling

9:53

Routing

Introducing the vue-router

6:42
Components, Props and Computed Properties

11:31
Router Links

2:32
Organizing the Components

4:12
Handling not found pages

2:28
CSS Modules with Webpack

4:30

Organizing the Application

Tidy up a messy component

5:55
Arrow Functions

2:11
Let the discussion begin!

10:48
Communicate between components

6:03
Destructuring JavaScript Arrays and Objects

5:34
Human Friendly Dates

5:53

Forum Logic

Vuex State Management

Migrating to Vuex

5:27
Creating Posts using Vuex

5:37
The NavBar

2:39
Grabbing the Authenticated User

2:14
User Profile Page

5:24
Utility to Count Object Properties

3:31
JavaScript: By Reference vs By Value

3:22
Update a User Profile

6:43
Shared Page Components

3:00
Use authId when Creating Posts

2:25

Forum Threads

Forum Posts

Editing Posts

7:30
Conditionally display multiple elements with an invisible wrapper

1:33
Post Editor Buttons

1:12
Vue.js Custom Prop Validation

3:08
Has the post been modified?

3:12

Higher Order Functions

Firebase Real-Time Database

Install Firebase Realtime Database

2:48
Set up the Firebase Realtime Database

1:12
Understanding the Vue.js Lifecycle Hooks

4:22
Start Migrate Vuex to use Firebase Realtime Database

7:06
Fetch Data from Firebase With Vuex Actions

3:40
Reusable Vuex Actions and Mutations

3:51
Vuex Actions that Fetches Multiple Items from Firebase

3:19
Fetch Firebase Data Before Creating Component Instance

3:48
Fetch Data for All Pages

5:12
Clean up Components by Mapping our Vuex Actions

3:29
Split Vuex Store into Multiple Files

2:40
Fetch Data Before Creating the Vue Instance

2:13
Store New Posts in Firebase with Vuex

3:58
Store New Threads in Firebase with Vuex

4:31
Counting Thread Contributors

1:49

More lessons coming soon