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
exportsTutorialDataService
that usesfirebase
's DatabaseReference
to interact with Firebase Database. - There are 3 components that uses
TutorialDataService
:-
AddTutorial
for creating new item -
TutorialsList
contains list of items, parent ofTutorial
-
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
Top comments (0)