Vue.js Firestore CRUD App example
Tags: vue, firebase, firestore, webdev
Published: 2021-03-06 04:46:16

In this tutorial, I will show you step by step to build a Vue.js Firetore CRUD App example.

Full Article: [https://bezkoder.com/vue-firestore-crud/](https://bezkoder.com/vue-firestore-crud/)

<h2>Vue Firestore CRUD Overview</h2>
We're gonna build an Vue Firestore 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 Firestore</li>
</ul>

Here are the screenshots:

- Create a new Tutorial:

![vuejs-firestore-crud-app-create](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csg5e691cxqwre92a4ml.png)

Cloud Firestore after the Create Operations:

![vuejs-firestore-crud-app-cloud-firestore-data-view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tn30vsv9728ri5p6jwb.png)

– Retrieve all Tutorials, the details will show when clicking on any Tutorial:

![vuejs-firestore-crud-app-retrieve](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22pdrjahud8yhd6cle7r.png)

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

![vuejs-firestore-crud-app-update-status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dy14lb52dofr92o7vu4p.png)

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

![vuejs-firestore-crud-app-update](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvgc2pq3a02s3nab2f13.png)

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

![vuejs-firestore-crud-app-delete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nm6hlo4idsyrjqh4jb0.png)

# Vue.js Firestore CRUD Project Structure
![vuejs-firestore-crud-app-project-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5qrllxfgjkkc28gnus8.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.firestore.Firestore">Firestore</a> service.
- <code>TutorialDataService</code> exports <code>TutorialDataService</code> that uses <code>firebase</code>'s Firestore <code>CollectionReference</code> to interact with Firestore collection.
- 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-firestore-crud/](https://bezkoder.com/vue-firestore-crud/)

## Further Reading
Related Posts:
- <a href="https://bezkoder.com/vue-firebase-realtime-database/">Vue Firebase Realtime Database: CRUD example</a>
- <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>

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>