How to Create a Basic Todo App with Quasar

Step 4: Create a new Quasar component

To create a new Quasar component, run the following command:

quasar create component Todo

This will create a new directory called Todo in the src/components directory, and it will contain the files for the Todo component.

Step 5: Add the todo data

Open the src/store/index.js file in a text editor and add the following code to define the todo data:

import { todos } from ‘./todos’

export default {
todos
}

Next, create a new file called src/store/todos.js and add the following code to define the todo data:

export const todos = {
state: {
list: []
},
mutations: {
add (state, todo) {
state.list.push(todo)
},
remove (state, todo) {
state.list.splice(state.list.indexOf(todo), 1)
}
},
actions: {
add ({ commit }, todo) {
commit('add', todo)
},
remove ({ commit }, todo) {
commit('remove', todo)
}
}
}

This defines the todo data as a list of objects, each with a title and done property. The state object contains the list of todos, and the mutations and actions objects contain methods for adding and removing todos from the list.

Step 6: Add the todo component template

Open the src/components/Todo/Todo.vue file in a text editor and add the following template to define the todo component:

<template>
<div>
<q-input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a todo" />
<q-list>
<q-item v-for="(todo, index) in todos" :key="index" class="q-pa-sm">
<q-checkbox v-model="todo.done" class="q-mr-sm" />
<q-item-label>{{ todo.title }}</q-item-label>
<q-item-side right>
<q-btn round dense icon="clear" @click="removeTodo(todo)" />
</q-item-side>
</q-item>
</q-list>
</div>
</template>

This template consists of an input field for adding new todos and a list for displaying the todos. Each todo in the list is displayed as a checkbox and a label, and it has a button for removing the todo.

Step 7: Add the todo component script

Open the src/components/Todo/Todo.vue file in a text editor and add the following script to define the todo component logic:

<script>
import { mapActions } from 'vuex'

export default {
name: 'Todo',
data () {
return {
newTodo: ''
}
},
computed: {
todos () {
return this.$store.state.todos.list
}
},
methods: {
...mapActions('todos', ['add', 'remove']),
addTodo () {
if (this.newTodo) {
this.add({ title: this.newTodo, done: false })
this.newTodo = ''
}
},
removeTodo (todo) {
this.remove(todo)
}
}
}
</script>

This script defines the newTodo data property, which is used to store the value of the input field. It also defines computed properties and methods for interacting with the todo data. The addTodo method adds a new todo to the list, and the removeTodo method removes a todo from the list.

Step 8: Add the todo component style

Open the src/components/Todo/Todo.vue file in a text editor and add the following style to define the todo component style:

<style scoped>
.q-checkbox {
width: 24px;
height: 24px;
}
</style>

This style sets the width and height of the checkbox to 24 pixels.

Step 9: Add the todo component to the layout

Open the src/layouts/MyLayout.vue file in a text editor and add the following code to import and use the todo component:

<template>
<q-layout>
<q-header>
<q-toolbar>
<q-toolbar-title>Todo App</q-toolbar-title>
</q-toolbar>
</q-header>

<q-page-container>
<Todo />
</q-page-container>
</q-layout>
</template>

<script>
import Todo from './Todo.vue'

export default {
name: 'MyLayout',
components: {
Todo
}
}
</script>

This adds the todo component to the layout template, so it will be displayed on every page of the app.

Step 10: Run the app

To run the app, open a terminal and run the following command:

quasar dev

This will start the development server and open the app in a web browser. You should now be able to add and remove todos from the list.

Conclusion

In this tutorial, we showed you how to create a basic todo app with Quasar. You should now have a good understanding of how to use Quasar to build cross-platform applications with Vue.js. If you want to learn more