building forum with vuejs and firebase

Building a Simple Forum With Vue-js, Vuex and Firebase Part3: Home Forums and Replies

In the final part of this tutorial we will demonstrate how to display the latest forums on the homepage and displaying specific forum and topic also how to add replies on topics and increment the topic view count.



Series Topics:


Modifying Api and Store

We will add some other new functions to the api and store, so open helper/api.js and modify it as shown below:


open store.js and modify it as shown below:


Displaying Home Forums

Let’s display the latest forums in the homepage, Open components/pages/Home.vue and insert the below code:

In the above code we dispatched the action setHomeForumsOnload which in turn load and fetches the forums, then we iterate over them, keep in mind when testing for these scenarios that the fetching process may take some time according to your network connection.


Displaying Single Forum

At this point we need a way to display single forum and their topics when clicking over them so we will update to files components/pages/ForumDisplay.vue:

Open components/partials/ForumTopics.vue and modify it like shown:


Displaying Single Topic and Replies

Open components/pages/TopicDisplay.vue and update it like shown below:

Open components/pages/TopicDisplay.vue

Open components/partials/TopicReplies.vue

Open components/partials/AddReply.vue

Now with these the above code the whole buzzle is completed try to refresh the page and click on forum and topic links, also try to view replies and add replies.



Upon following this series you have learned a lot of topics including vuejs development and how to use Vuex store to store state data and also the ability to move to pages using Vue router, and how to connect to firebase and use it’s api for storing data and authentication

Share this: