Vue.js Firestore example - Vue.js CRUD serverless with Firebase Cloud Firestore
Male avatar

loveprogramming viết ngày 11/04/2021

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: Vue.js CRUD example – a simple Note App

Vue.js Firestore example Overview


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.


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



Project Structure


We have 3 components:

  • App.vue holds all of the other components.
  • NotesList.vue contains all of notes in a List with + Note button.
  • Note.vue display a single Note in the List that allows us to create new Note or edit current Note.


  • Vue CLI 3.0.1
  • Vue 2.5.17
  • Firebase SDK for Javascript 5.4.2


    Setup Vue Project

    Install vue-cli

    For use Vue CLI anywhere, run command: npm install -g vue-cli

    Init Project

    Point cmd to the folder you want to save Project folder, run command: npm create vue-note-app

You will see 2 options, choose default:


Install Firebase SDK

Run command: npm install firebase
Once the process is done, you can see firebase in package.json:

"dependencies": {
  "firebase": "^5.4.2",
  "vue": "^2.5.17"

More at:

Bình luận

{{ }}
Bỏ hay Hay
Male avatar
{{ comment_error }}

Hiển thị thử

Chỉnh sửa

Male avatar


545 bài viết.
97 người follow
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 9 tháng trước
1 0
Male avatar
1 0 Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 7 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 7 tháng trước
1 0
Bài viết liên quan
10 1
_Có mấy chia sẻ nhỏ, mình muốn đưa ra để mọi người cùng thảo luận góp ý. Thread này không tập trung vào Technical nữa mà discuss về Coding Style & ...
Hùng Phong viết hơn 2 năm trước
10 1
Male avatar
3 0
(Ảnh) Gridsome là một framework phát triển trang web hiện đại để tạo các trang web tốc độ nhanh và an toàn. Các trang HTML tĩnh được tạo ra để tạo... viết gần 2 năm trước
3 0
Male avatar
0 0 Vue.js Form Validation example with VeeValidate In this tutorial, we'...
loveprogramming viết 3 tháng trước
0 0


{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}

Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!