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: 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:

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

Further Reading

Related Posts:

• Vue.js 2 CRUD Application with Vue Router & Axios
• Vuetify data-table example with a CRUD App | v-data-table
• Vue Firestore: Build a CRUD App example

Fullstack CRUD App:

• Vue.js + Node.js + Express + MySQL
• Vue.js + Node.js + Express + PostgreSQL
• Vue.js + Node.js + Express + MongoDB
• Vue.js + Spring Boot + MySQL/PostgreSQL
• Vue.js + Spring Boot + MongoDB
• Vue.js + Django Rest Framework

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