Vue.js Firebase Database CRUD example
Tags: vue, firebase, webdev, todayilearned
Published: 2021-03-06 04:59:22

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

Related Post: [Vue.js Firestore CRUD example](https://dev.to/bezkoder/vue-js-firestore-crud-app-example-4hjh)

<h2>Vue Firebase CRUD with Realtime Database Overview</h2>
We're gonna build an Vue Firebase CRUD App using <a href="https://www.npmjs.com/package/firebase">firebase</a> library in which:
<ul>
	<li>Each Tutorial has key, title, description, published status.</li>
	<li>We can create, retrieve, update, delete Tutorials (CRUD operations) from Firebase Realtime Database</li>
</ul>

Here are the screenshots:

- Create a new Tutorial:

<img src="https://bezkoder.com/wp-content/uploads/2020/10/vue-firebase-crud-realtime-database-create.png" alt="vue-firebase-crud-realtime-database-create" width="700" height="370" class="alignnone size-full wp-image-4906" />
![vuejs-firebase-database-crud-create](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1597jfui1v7h2k8gu0dn.png)

Firebase Realtime Database right after the Operation:

![vuejs-firebase-database-crud-create-db](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cug8kbblwyzprckyhklw.png)

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

![vuejs-firebase-database-crud-retrieve-all](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3p76an9peyfwihnk4fh7.png)

- Change status to <strong>Published</strong>/<strong>Pending</strong> using <strong>Publish</strong>/<strong>UnPublish</strong> button:

![vuejs-firebase-database-crud-update-status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ssim3aps5i4lp5nhxpof.png)

- Update the Tutorial details with <strong>Update</strong> button:

![vuejs-firebase-database-crud-update](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56mxlk2oef3tl48ko9yy.png)

- Delete the Tutorial using <strong>Delete</strong> button:

![vuejs-firebase-database-crud-delete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gsduf49bpf7p2c51iivp.png)

- Delete all Tutorials with <strong>Remove All</strong> button:

![vuejs-firebase-database-crud-delete-all](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vsncne4nmhix19uj8fnu.png)

<h2>Vue.js Firebase Database CRUD Project Structure</h2>
![vuejs-firebase-database-crud-project-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ruk4je3eysbzpt1zzhjg.png)

Let me explain it briefly.

- <strong>package.json</strong> contains 3 main modules: <code>vue</code>, <code>vue-router</code>, <code>firebase</code>.
- <code>firebase.js</code> configures information to connect with Firebase Project and export Firebase <a href="https://firebase.google.com/docs/reference/js/firebase.database.Database">Database</a> service.
- <code>TutorialDataService</code> exports <code>TutorialDataService</code> that uses <code>firebase</code>'s Database <code>Reference</code> to interact with Firebase Database.
- There are 3 components that uses <code>TutorialDataService</code>:
<ul>
	<li><code>AddTutorial</code> for creating new item</li>
	<li><code>TutorialsList</code> contains list of items, parent of <code>Tutorial</code></li>
	<li><code>Tutorial</code> shows item details</li>
</ul>
- <strong>router.js</strong> defines routes for components.
- <code>App.Vue</code> contains Router View and navigation bar.

For more details, implementation and Github, please visit:
[https://bezkoder.com/vue-firebase-realtime-database/](https://bezkoder.com/vue-firebase-realtime-database/)

#Further Reading

Related Posts:
- <a href="https://bezkoder.com/vue-js-crud-app/">Vue.js 2 CRUD Application with Vue Router & Axios</a>
- <a href="https://bezkoder.com/vuetify-data-table-example/">Vuetify data-table example with a CRUD App | v-data-table</a>
- <a href="https://bezkoder.com/vue-firestore-crud/">Vue Firestore: Build a CRUD App example</a>

Fullstack CRUD App:
<ul>
	<li><a href="https://bezkoder.com/vue-js-node-js-express-mysql-crud-example/">Vue.js + Node.js + Express + MySQL</a></li>
	<li><a href="https://bezkoder.com/vue-node-express-postgresql/">Vue.js + Node.js + Express + PostgreSQL</a></li>
	<li><a href="https://bezkoder.com/vue-node-express-mongodb-mevn-crud/">Vue.js + Node.js + Express + MongoDB</a></li>
	<li><a href="https://bezkoder.com/spring-boot-vue-js-crud-example/">Vue.js + Spring Boot + MySQL/PostgreSQL</a></li>
	<li><a href="https://bezkoder.com/spring-boot-vue-mongodb/">Vue.js + Spring Boot + MongoDB</a></li>
	<li><a href="https://bezkoder.com/django-vue-js-rest-framework/">Vue.js + Django Rest Framework</a></li>
</ul>

Newer version: [Vue 3 Firebase example: Build a CRUD Application](https://www.bezkoder.com/vue-3-firebase/)