Warning: Trying to access array offset on value of type bool in /mnt/KDJ-SH-SGB-STORAGE-1/kdjayako/public_html/wp-content/plugins/pro-elements/modules/dynamic-tags/tags/post-featured-image.php on line 39

Warning: Trying to access array offset on value of type bool in /mnt/KDJ-SH-SGB-STORAGE-1/kdjayako/public_html/wp-content/plugins/pro-elements/modules/dynamic-tags/tags/post-featured-image.php on line 39

Warning: Trying to access array offset on value of type bool in /mnt/KDJ-SH-SGB-STORAGE-1/kdjayako/public_html/wp-content/plugins/pro-elements/modules/dynamic-tags/tags/post-featured-image.php on line 39

Warning: Trying to access array offset on value of type bool in /mnt/KDJ-SH-SGB-STORAGE-1/kdjayako/public_html/wp-content/plugins/pro-elements/modules/dynamic-tags/tags/post-featured-image.php on line 39

KD Jayakody

Call Us: 076 72 33 595


Warning: Trying to access array offset on value of type bool in /mnt/KDJ-SH-SGB-STORAGE-1/kdjayako/public_html/wp-content/plugins/pro-elements/modules/dynamic-tags/tags/post-featured-image.php on line 39

How to Create a Basic Todo App with Quasar

Dec 22, 2022

Quasar is a powerful open-source framework for building cross-platform applications with Vue.js. In this tutorial, we will show you how to install Quasar and create a basic todo app.

Prerequisites

Before you begin, you will need the following:

  • Node.js and npm installed on your machine.
  • A text editor.

Step 1: Install the Quasar CLI

To install the Quasar CLI, open a terminal and run the following command:

npm install -g @quasar/cli

Step 2: Create a new Quasar project

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

quasar create my-project

Replace my-project with the name you want to give to your project. This will create a new directory with the same name as your project, and it will contain the files and directories for your Quasar app.

Step 3: Change into the project directory

Change into the project directory:

cd my-project

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

Recent Posts