DEV Community

Cover image for Vue.js Firebase Database CRUD example
Tien Nguyen
Tien Nguyen

Posted on • Updated on • Originally published at

Vue.js Firebase Database CRUD example

In this tutorial, I will show you step by step to build a Vue.js Firebase Database CRUD App - Firebase Realtime Database.

Full Article:

Related Post: Vue.js Firestore CRUD example

Vue Firebase CRUD with Realtime Database Overview

We're gonna build an Vue Firebase CRUD App using firebase library in which:

  • Each Tutorial has key, title, description, published status.
  • We can create, retrieve, update, delete Tutorials (CRUD operations) from Firebase Realtime Database

Here are the screenshots:

  • Create a new Tutorial:


Firebase Realtime Database right after the Operation:


  • Retrieve all Tutorials with details when clicking on a Tutorial:


  • Change status to Published/Pending using Publish/UnPublish button:


  • Update the Tutorial details with Update button:


  • Delete the Tutorial using Delete button:


  • Delete all Tutorials with Remove All button:


Vue.js Firebase Database CRUD Project Structure


Let me explain it briefly.

  • package.json contains 3 main modules: vue, vue-router, firebase.
  • firebase.js configures information to connect with Firebase Project and export Firebase Database service.
  • TutorialDataService exports TutorialDataService that uses firebase's Database Reference to interact with Firebase Database.
  • There are 3 components that uses TutorialDataService:
    • AddTutorial for creating new item
    • TutorialsList contains list of items, parent of Tutorial
    • Tutorial shows item details
  • router.js defines routes for components.
  • App.Vue contains Router View and navigation bar.

For more details, implementation and Github, please visit:

Further Reading

Related Posts:

Fullstack CRUD App:

Newer version: Vue 3 Firebase example: Build a CRUD Application

Top comments (0)