Organizing the Components

What do I need?

Get started with the mighty Vue CLI

Scaffold your project with Vue CLI

Explore the Webpack template

Automatic Code Review, Linting with ESLint

Structuring our data

Import data source and show the conversations

Vue.js with a Theme and Scoped CSS Styling

Introducing the vue-router

Components, Props and Computed Properties

Router Links

Handling not found pages

CSS Modules with Webpack

Tidy up a messy component

Arrow Functions

Let the discussion begin!

Communicate between components

Destructuring JavaScript Arrays and Objects

Human Friendly Dates

Base Components

Global Base Components

Organize threads in forums

Forum Components

Categories, Collections of Forums

Migrating to Vuex

Creating Posts using Vuex

The NavBar

Grabbing the Authenticated User

User Profile Page

Utility to Count Object Properties

JavaScript: By Reference vs By Value

Update a User Profile

Shared Page Components

Use authId when Creating Posts

Create New Threads

Actions and Mutations

Add the Route

Redirect on Publish

Use Route Params

ThreadEditor

Edit Threads

Improve the ThreadEditor

Editing Posts

Conditionally display multiple elements with an invisible wrapper

Post Editor Buttons

Vue.js Custom Prop Validation

Has the post been modified?

What is a Higher Order Function?

Creating Dynamic Vuex Getters using Higher Order Functions

Create Vuex Mutations with Higher Order Functions

Filter Array Elements to Count Unique Contributors

Small Improvements Before the Firebase Chapter

Install Firebase Realtime Database

Set up the Firebase Realtime Database

Understanding the Vue.js Lifecycle Hooks

Start Migrate Vuex to use Firebase Realtime Database

Fetch Data from Firebase With Vuex Actions

Reusable Vuex Actions and Mutations

Vuex Actions that Fetches Multiple Items from Firebase

Fetch Firebase Data Before Creating Component Instance

Fetch Data for All Pages

Clean up Components by Mapping our Vuex Actions

Split Vuex Store into Multiple Files

Fetch Data Before Creating the Vue Instance

Store New Posts in Firebase with Vuex

Store New Threads in Firebase with Vuex

Counting Thread Contributors

Updating posts in Firebase Realtime Database

Update threads in Firebase Realtime Database

Hide Content Until Data is Fully Loaded

Share Logic Between Components with Mixins

Display a Loading Indicator while Components Fetch Async Data

Show a Cool Loading Spinner While Components Fetch Data

Show a Progress Bar while Components Fetch Asynchronous Data

The Firebase Tools (CLI)

Create Custom NPM script To Seed Database

Using Environment Variables in the Vue.js Webpack Template

Using .env file in the Vue.js Webpack Template

Create the Registration Form

Store new Users in the Database

Implement Firebase Authentication

Sign Users in When they Register

Sign Users In and Out

Dropdown Menus using Class Bindings

Authenticate Users via 3rd Party Providers

In Component Navigation Guards

Componentless Routes with Navigation Guards

Global Navigation Guards and Meta Fields

Firebase Authentication and Navigation Guards

Protecting Pages from Authenticated Users

Redirect Users After Logging In to the Page they Tried to Visit

Only Allow Authenticated Users to Create and Edit Posts

Profile Page of Authenticated User

Force Vue Router to Destroy Component to Trigger Lifecycle Hooks