DEV Community

Cover image for Vue + Firestore ← Build A Simple CRUD App with Authentication
Raja Tamil
Raja Tamil

Posted on • Updated on

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?

Alt text of image

Let’s get started 🚀

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
Enter fullscreen mode Exit fullscreen mode

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:

Alt text of image

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: "****************************"
};
Enter fullscreen mode Exit fullscreen mode

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 srccomponents → create Todos.vue file.

Then, add the scaffold code.

<template>
</template>

<script>
export default {
}
</script>

<style>
</style>

Enter fullscreen mode Exit fullscreen mode

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

import Todos from '@/components/Todos'
Enter fullscreen mode Exit fullscreen mode

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

{
    path: '/todo',
    name: 'Todos',
    component: Todos,
    meta: {
        auth: true
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Continue Reading...

Discussion (0)