building forum with vuejs and firebase

Building a Simple Forum With Vue-js, Vuex and Firebase Part2: Forum and Topic CRUD

We will continue our tutorial of building a simple forum using Vuejs and Firebase. In this part we will implement how to add and edit forums and topics. Also display the user forums and ability to add replies.



Series Topics:


Creating and Editing Forums

We will add functions to add, edit and delete a forum from firebase so open helper/api.js and modify it like this:

In the above code we added four new functions using the firebase api which are:

  • addForum
  • updateForum
  • deleteForum
  • userForums: This will return the user forums when he is login.

Now let’s modify our store so open store.js and modify it like shown below:

In the above code we added some state variables that will be used when adding and updating the forums such as the forum title and forum content and also we added some mutations and actions.


Add Forum Component

Open components/pages/AddForum.vue and insert the below code:

Here we created a simple form and then bind it to computed properties that read and write to the store then we added a function that submit the form, and then save the forum to firebase after that we fetch the user forums and add it to the store to be display later in a dedicated page.


Modify components/pages/Login.vue inside the login method locate this line:

and add this code below it:

and this code fetches the user forums after successful login.


Modify app.js and add this code inside the mounted() lifecycle hook:

Now in the terminal run

Then navigate to http://localhost/project_path/ and login then click on add forum button on the header, on successful add you will be redirected to my forums page, which we will update it in the next section.


Display User Forums

Let’s display the user forums, we loop the forums from the store variable that we added in previous section.

So open component/pages/MyForums.vue and update it as shown:

In the above code we looped over the forums and then displayed them in a grid view and added some buttons like viewing forum topics, add topic, edit forum, and delete forum.

Now reload the page and click on My Forums button in the header, wait for some seconds until the forums appear and try to click on delete, the other buttons will be implemented in the next sections.


Updating User Forums

Open helper/api.js and add this function after userForums function:

This function will be used to retrieve specific forum by it’s unique key which will be used in the edit form below.


Edit Forum Component

Open components/pages/EditForum.vue and add the below code:

Now if you click on the edit button you will see the edit form populated with the forum data, click Update then the forum will be updated and you will be redirected to User Forums page.


Handling Forum Topics

Open helper/api.js and modify it as shown:

Also Open store.js and modify it as shown:

Add Topic Component

Open components/pages/AddTopic.vue and insert the below code:

This form the same as the Add Forum form, but in this case we add a topic inside specific forum.


Display Topics Component

Open components/pages/ForumTopics.vue and insert the below code:


Update Topic Component

Open components/pages/EditTopic.vue and modify it as shown:

At this point we finished adding, editing, displaying and deleting topics. Try to experiment with them and we will implement the home forums and forum display in the next part.


Continue to the next part>>


Share this: