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

Vue.js 3 Options API Masterclass

Introducing Categories, Collections of Forums thumbnail image

Get access to the most comprehensive Vue.js video library in the world. Over 300 video lessons including the newest Vue 3 features.

Introducing Categories, Collections of Forums

🚧 PLEASE NOTE: This masterclass is built with the Options API

The Composition API Masterclass is coming soon!

In this lesson, we'll implement Categories in our application. Categories are collections 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"/>