Learn Vue JS course Learn Javascript and Vue JS Learn VueJS course Learn VueJS Tutorial

Categories, Collections of Forums

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

Enroll today and get access to all lessons!

Already a user? Sign in

Categories, Collections of Forums

Categories, Collections of Forums

Source Code Download Lesson

In the previous lessons you probably thought that it wouldn’t be enough with just a way to group forums - and yes, you are right - we need categories as well. A category is a collection of forums. It is the very first node in our application structure, and it is of great organizational help!

Since we have seen how to implement this functionality, this is a great opportunity to build something on your own to practice what you’ve learned.


  • CategoryListItem will need an array of category’s forums.

  • PageCategory can use CategoryListItem.

  • Instead of re-creating the forum list items you should use the ForumList component in the CategoryListItem.

  • ForumList won’t be used outside of the Category related components. So, ForumList's template can render a list of forums without having a list title. (by now the list title is Forums)

  • Example CategoryListItem template:
<div class="forum-list">
  <h2 class="list-title">
    <router-link :to="{name: 'Category', params: {id: category['.key']}}">
      {{ category.name }}
  <ForumList :forums="categoryForums"/>

The Vue.js Master Class

Getting Started

Application Structure


Organizing the Application

Forum Logic

Vuex State Management

Forum Threads

Forum Posts

Higher Order Functions

Firebase Real-Time Database

Loading Indicators when Fetching Async Data

Workflow Improvements

User Authentication

Vue Router Middlewares and Navigation Guards

Modularise Vuex Store

  • Split a Large Vuex Store Into Namespaced Modules soon

  • Split a Large Vuex Store Into Namespaced Modules Part 2 soon

More lessons coming soon