DEV Community

loading...
Cover image for Vue.js Firebase Database CRUD example

Vue.js Firebase Database CRUD example

tienbku profile image Tien Nguyen Originally published at bezkoder.com Updated on ・3 min read

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

Full Article: https://bezkoder.com/vue-firebase-realtime-database/

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:

vue-firebase-crud-realtime-database-create
vuejs-firebase-database-crud-create

Firebase Realtime Database right after the Operation:

vuejs-firebase-database-crud-create-db

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

vuejs-firebase-database-crud-retrieve-all

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

vuejs-firebase-database-crud-update-status

  • Update the Tutorial details with Update button:

vuejs-firebase-database-crud-update

  • Delete the Tutorial using Delete button:

vuejs-firebase-database-crud-delete

  • Delete all Tutorials with Remove All button:

vuejs-firebase-database-crud-delete-all

Vue.js Firebase Database CRUD Project Structure

vuejs-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:
https://bezkoder.com/vue-firebase-realtime-database/

Further Reading

Related Posts:

Fullstack CRUD App:

Discussion (0)

pic
Editor guide