Vue.js Firestore example - Vue.js CRUD serverless with Firebase Cloud Firestore
Tags: vue, firestore, crud, firebase
Published: 2021-03-05 17:12:42

https://grokonez.com/frontend/vue-js/vue-js-firestore-example-vue-js-crud-serverless-with-firebase-cloud-firestore

Cloud Firestore helps us store data in the cloud. It supports offline mode so our app will work fine (write, read, listen to, and query data) whether device has internet connection or not, it automatically fetches changes from our database to Firebase Server. We can structure data in our ways to improve querying and fetching capabilities. This tutorial shows you a Vue.js app that can do Firebase Firestore CRUD Operations.

Related Post: <a href="https://grokonez.com/frontend/vue-js-crud-example-a-simple-note-app">Vue.js CRUD example – a simple Note App</a>

<!--more-->
<h2>Vue.js Firestore example Overview</h2>
<h3>Goal</h3>
Our Vue App can help us write new Notes, then it displays a list of Notes and each Note page (containing title and content) can be modified easily. This App also supports offline mode - we can create/update/delete Note without internet connection.

<img src="https://grokonez.com/wp-content/uploads/2018/09/vuejs-firestore-example-crud-note-app-overview.png" alt="vuejs-firestore-example-crud-note-app-overview" width="688" height="357" class="alignnone size-full wp-image-14607" />

And, of course, this App interacts with Firebase Firestore as backend infrastructure:

<img src="https://grokonez.com/wp-content/uploads/2018/09/vuejs-firestore-example-note-app-firebase-firestore-result.png" alt="vuejs-firestore-example-note-app-firebase-firestore-result" width="733" height="249" class="alignnone size-full wp-image-14608" />
<h3>Demo</h3>
<iframe width="853" height="480" src="https://www.youtube.com/embed/RW_xGHv89w0?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<h3>Project Structure</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/09/vuejs-firestore-example-crud-note-app-project-structure.png" alt="vuejs-firestore-example-crud-note-app-project-structure" width="178" height="359" class="alignnone size-full wp-image-14609" />

We have 3 components:
- <code>App.vue</code> holds all of the other components.
- <code>NotesList.vue</code> contains all of notes in a List with <strong>+ Note</strong> button.
- <code>Note.vue</code> display a single Note in the List that allows us to create new Note or edit current Note.
<h3>Technologies</h3>
- Vue CLI 3.0.1
- Vue 2.5.17
- Firebase SDK for Javascript 5.4.2
<h2>Practice</h2>
<h3>Setup Vue Project</h3>
<h4>Install vue-cli</h4>
For use Vue CLI anywhere, run command:
<code>npm install -g vue-cli</code>
<h4>Init Project</h4>
Point cmd to the folder you want to save Project folder, run command:
<code>npm create vue-note-app</code>

You will see 2 options, choose <strong>default</strong>:

<img src="https://grokonez.com/wp-content/uploads/2018/09/vuejs-firestore-example-note-app-project-setup.png" alt="vuejs-firestore-example-note-app-project-setup" width="255" height="57" class="alignnone size-full wp-image-14610" />

<h4>Install Firebase SDK</h4>
Run command: <code>npm install firebase</code>
Once the process is done, you can see firebase in <strong>package.json</strong>:
<pre class="lang:default highlight:0 mark:2">
"dependencies": {
  "firebase": "^5.4.2",
  "vue": "^2.5.17"
},
</pre>
<h3>Setup Firebase Project</h3>
<h4>Create Project</h4>
Go to <a href="https://console.firebase.google.com" rel="nofollow">Firebase Console</a>, login with your Google Account, then click on <strong>Add Project</strong>.

Enter <strong>Project name</strong>, select <strong>Location</strong>:

<img src="https://grokonez.com/wp-content/uploads/2018/09/vuejs-firestore-example-note-app-add-firebase-project.png" alt="vuejs-firestore-example-note-app-add-firebase-project" width="491" height="339" class="alignnone size-full wp-image-14611" />

Then press <strong>CREATE PROJECT</strong>.
<h4>Config Rules for Firebase Cloud Firestore</h4>
On the left tab, click on <strong>Database</strong>.
Choose <strong>Cloud Firestore</strong>. Click on <strong>Create Database</strong>, a window is shown, choose <strong>Start in test mode</strong>:

<img src="https://grokonez.com/wp-content/uploads/2018/09/vuejs-firestore-example-note-app-add-firebase-database-rule.png" alt="vuejs-firestore-example-note-app-add-firebase-database-rule" width="657" height="414" class="alignnone size-full wp-image-14613" />

More at: https://grokonez.com/frontend/vue-js/vue-js-firestore-example-vue-js-crud-serverless-with-firebase-cloud-firestore