Vue + Firestore Build A Simple CRUD App with Authentication

In this Firestore CRUD Vue.js tutorial, I will be guiding you on how to build a real-world To-Do web app with Firebase Authentication.

This is the second part of the Firestore CRUD Vue.js tutorial.

Part #1: Firebase Authentication for Vue.js

Part #2: Build A Secure To-Do App with Vue.js + Firestore (you’re here)

What are we building?

Let’s get started 🚀

• Create a Component and Route for To-Do View
• Structure Firestore Data for To-Do App
• Add User-Specific Data to Cloud Firestore
• Get User-Specific Data with Cloud Firestore
• Update User Data in the Firestore Database
• Delete Data from Cloud Firestore
• Secure To-Do App Using Firestore Rules

If you already have the vue.js project running and added Firebase to your project from the Firebase Authentication for Vue.js tutorial, skip to Create a Component and Route for To-Do View.

Up and Running Vue.js Starter Project

Go ahead and download the starter vue.js project.

CD to the project on your Terminal, and run the following command:

npm install

Once the dependencies installation is complete, go ahead and launch the app by going to the provided localhost URL.

If everything is good, you should have an app running like this:

Configure Firebase to the Vue.js Project

Once the vue project is up and running, the next step will be to add Firebase to your project by going to main.js and replace config code from your Firebase project.

const firebaseConfig = {
  apiKey: "****************************",
  authDomain: "****************************",
  databaseURL: "****************************",
  projectId: "****************************",
  storageBucket: "****************************",
  messagingSenderId: "****************************",
  appId: "****************************"
};

If OAuth login buttons such as Facebook and Google do not work, you will have to configure them which are covered in the Firebase Authentication for Vue.js tutorial.

Create A Todo Component and Route

In your vue.js project, go to the src → components → create Todos.vue file.

Then, add the scaffold code.

<template>
</template>

<script>
export default {
}
</script>

<style>
</style>


Once it’s done, switch to router folder → index.js file and import the component at the top.

import Todos from '@/components/Todos'

Then, add a new object for todo inside the router array.

{
    path: '/todo',
    name: 'Todos',
    component: Todos,
    meta: {
        auth: true
    }
}

Set auth:true flag in this todo route object, which will make sure only authenticated users have access to the todo page component.

Switch back to ToDo.vue file and add HTML code for navigation and heading inside between the starting and ending template tags.

<section>
    <navigation></navigation>
    <h5 class="center-align">To-Dos</h5>
</section>

I am using Materialize CSS Framework in this project in case you are wondering.

Moving on to the script section.

At the top, a component is added.

<script> 
import navigation from "@/components/NavBar.vue"; 
export default { 
  components: { navigation }
}; 
</script>

Then, import NavBar.vue and add it inside the components object.

It would be nice to have a navigation item at the top of the todos page. Hop over to NavBar.vue and add the following code inside the ul element.

<li v-show="user">
  <router-link to="/todo">To Do</router-link>
</li>

Continue Reading...