Build Todo List With Vuejs, Vuex, Vuetify and Firebase 🔥

🔭Today I’m going to show you how to build application from scratch using The most powerfull SPA Framework “Vuejs” with Vuex over Typescript, Vuetify for the material and Firebase 🔥.

Part 1: Installations & Configurations

• Node.js & Npm (https://nodejs.org/en/download/)
• VSCode (https://code.visualstudio.com/download)

Open terminal / cmd and type:

$ sudo npm i -g @vue/cli
$ vue create vue-todo-list

Select Manually select features

Select “In package.json”

$ cd vue-todo-list

Install vue-generate-component-typescript

$ npm install -g vue-generate-component-typescript

Project Structure

• node_modules: contains the libraries from npm
• public: include statics files.
• src: the source code of the project
• components: vue components
• router: include the router navigation of the app
• store: include vuex store
• views: the views layers of the app

Add Vuetify

$ vue add vuetify

Open tsconfig.json file and add

"types": [
    "webpack-env",
    "vuetify" // <====== Add this line
],

Welcome to Vuetify

Run the project

$ npm run serve

Open your browser and type http://localhost:[your-port]

Lets make some changes in the project, Remove “HellowWorld.vue” from components folder and also remove “About.vue” and “Home.vue” from views Folder.

Now, Lets generate home class based component with vgc

$ vgc generate component src/views/home

Open App.vue file and replace vuetify template with a router-view template

Open router file, router/index.ts and remove the old home and about components. your index.ts file will looks like this

Run the project again

Part 2: Vuex — Data Store

Vuex makes it easy to manage the state of your application. Another way of looking at this — it helps you manage the data you display and how you respond to user actions.

Note:I would suggest you to visit https://vuex.vuejs.org If you don’t know the architecture of state management technology.

Step 1 : Create create the model — task.model.ts file on src/models folder

Step 2: In the store folder create Result Generic Model

Step 3: Open store/index.ts file and and change the code

I just prefer to store the data in a single file, You can also separate store to Multiple files

We need to add 3 methods for mutations task — addTask, editTask and removeTask.

Mutations

The only way to actually change state in a Vuex store is by committing a mutation

addTask(state, task: Task) {
   state.data.push(task)
},
editTask(state, task: Task) {
  let taskIndex: number = state.data.findIndex(t => t.id == task.id)
  state.data[taskIndex] = task;
},
removeTask(state, id: string) {
  let taskIndex:number = state.data.findIndex(t => t.id == id)
  taskIndex > -1 ? state.data.splice(taskIndex, 1) : new     Error('Invalid index');
}

Actions

Actions are similar to mutations, the differences being that actions support asynchronous methods.. We will comeback and make action more operative.

addTask(contex, task: Task) {
  contex.commit('addTask', task);
},
editTask(contex, task: Task) {
  contex.commit('editTask', task);
},
removeTask(context, id: string) {
  context.commit('removeTask', id)
}

Getters

Vuex allows us to define “getters” in the store. You can think of them as computed properties for stores. Like computed properties, a getter’s result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed.

tasks(state): Array<Task> {
   return state.data;
}

Final Result

Part 3: Todo List UI and Vuetify

Vuetify is a powerful material design based on vue with beautifully Handcrafted Material Component

Vue Material Design Component Framework - Vuetify.js

Let’s create 4 components

1. Header Component: src/components/header
2. TodoList Component: src/components/todo-list
3. AddTask Component: src/components/todo-list/add-task
4. TasksList Component: src/components/todo-list/tasks-list

$ vgc generate component src/components/header
$ vgc generate component src/components/todo-list
$ vgc generate component src/components/todo-list/add-task
$ vgc generate component src/components/todo-list/tasks-list

Register Components Plugin

Now, Let’s create components.plugin.ts for components registration in plugins Folder and add the 4 new components above.

Don’t forget to import components.plugin.ts to main.ts

//main.ts
import './plugins/components.plugin';

Step 1: Home Components

Open home.component.html file and add the header and todo-list Components that we were created before.

Step 2: Header Component

open header.component.html and create the “app-bar” of the page

Now, In home.component.ts we need to define the title parameter and set Data from vuex store

Step 3: Todo List Component

Now, we are going to create the “Main” application by using add-task and tasks-list components.

Open todo-list.component.html and create add-task and tasks-list in 2 Separated rows

Step 4: Add Task Component

Lets and create a text-field input in todo-list.component.html

By using v-model we can add the new description

In todo-list.component.ts we need to dispatch the new task.

Step 5: Tasks List Component

Next, let’s create table for the event list, You can use any component you want I used v-simple-table, Go to tasks-list.component.html

In tasks-list.component.ts We need to create 2 actions:

1. Complete Task
2. Remove Task

Also, we need to get tasks from global store:

Final Result

Part 4: Firebase Integration

Because we’re planning to use various Firebase features we need to add the Firebase JavaScript library to the project as well:

$ sudo npm i --save firebase

Go to https://console.firebase.google.com/ and create “vue-todo-list” application:

Create project

Type some name and create

Now, We need to create configuration file for firebase, so let’s do it.

On the root’s project create new file called “firebase.config.ts”

import firebase from 'firebase';
const firebaseConfig = {
  apiKey: "<--->",
  authDomain: "<--->",
  databaseURL: "<--->",
  projectId: "<--->",
  storageBucket: "<--->",
  messagingSenderId: ""<--->",
  appId: "<--->",
  measurementId: "<--->"
};
firebase.initializeApp(firebaseConfig)
export const db = firebase.firestore()

Now we are able to connect firebase database with our store, Let’s do that

In “store/index.ts” we need to implements the actions’s methods that we have Been created before — addTask, editTask and removeTask

addTask

addTask(contex, task: Task) {
   db.collection(collection)
   .add(task)
   .then(res => {
     task.id = res.id;
     contex.commit('addTask', task);
  }).catch(err=>{
})

editTask

db.collection(collection)
   .doc(task.id)
   .set(task)
   .then(res=>{
      contex.commit('editTask', task);
   })
 .catch(err=>{
})

removeTask

db.collection(collection)
  .doc(id)
  .delete()
  .then(res=>{
     context.commit('removeTask', id)
 })
.catch(err=>{
})

We are going to change the getters method with a sort function.

Your store file:

Conclusion

We learned how to handle local state with vuex, building UI with vuetify and Store adata on firebase cloud.

My ko-fi