FrameworksQuasar

How to Create a Basic Todo App with Quasar

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

Related posts
FrameworksQuasar

How to Build an AAB File for Andorid 13 Using Quasar Framework?

To build an Android App Bundle (AAB) file for Android 13 using the Quasar framework, you will need…
Read more
FrameworksQuasar

What is Quasar Framework?

Quasar is a powerful open-source framework for building cross-platform applications with Vue.js. It…
Read more
FrameworksQuasar

How to Sign an APK Easily using APKSigner - Cordova, Quasar - Using CLI

You are still searching for an easy way to get your APK signed. I have posted multiple ways before…
Read more
Newsletter
Become a Trendsetter

Sign up for KDJ Guru's Daily Digest and get the best of KDJ Guru Articles, tailored for you.

Leave a Reply

Your email address will not be published. Required fields are marked *