Import data source and show the conversations

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

Enroll today and get access to all lessons!

Already a user? Sign in

Import data source and show the conversations

Import data source and show the conversations

Source Code Download Lesson

In this lesson, we will review and import our JSON data source to get the ball rolling.

We will then get our hands dirty by connecting the data source to our application and loop through and render both our threads and posts.

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