Welcome to our Todo App

In this article, we will be discussing how to create a Todo app using Laravel, Vuejs, Inertia, and Quasar Framework. This combination of technologies will allow us to build a modern, efficient, and responsive web application for managing your daily tasks.

What you will need

• Laravel installed on your machine
• Vuejs installed on your machine
• Inertia and Quasar Framework

Setting up the project

First, create a new Laravel project using the following command:

composer create-project --prefer-dist laravel/laravel todo-app

Next, install the Vuejs, Inertia, and Quasar Framework into your Laravel project:

composer require inertiajs/inertia-laravel
php artisan vendor:publish --tag=inertia
yarn add @inertiajs/inertia tailwindcss @inertiajs/inertia-vue vue
yarn add vue@^3

Creating the Todo Component

Create a new Vue component for the Todo app using the Quasar Framework. You can design the component according to your preferences, but here’s an example of a basic Todo app component:


<template>
<div>
<q-input v-model="newTodo" @keyup.enter="addTodo" label="Add New Todo"></q-input>
<q-list>
<q-item
v-for="todo in todos"
:key="todo.id"
>
<q-item-section>
<q-item-label
:class="{ 'strike-through': todo.completed }"
>
{{ todo.task }}
</q-item-label>
</q-item-section>
<q-item-section side>
<q-btn icon="delete" @click="removeTodo(todo.id)"></q-btn>
<q-checkbox v-model="todo.completed" label="Complete" ></q-checkbox>
</q-item-section>
</q-item>
</q-list>
</div>
</template>

<script>
export default {
data() {
return {
newTodo: "",
todos: [
{ id: 1, task: "Go to the gym", completed: false },
{ id: 2, task: "Buy groceries", completed: true },
],
};
},
methods: {
addTodo() {
this.todos.push({ id: this.todos.length + 1, task: this.newTodo, completed: false });
this.newTodo = "";
},
removeTodo(id) {
this.todos = this.todos.filter((todo) => todo.id !== id);
},
},
};
</script>


Integrating with Laravel and Inertia

Once the Vue component is ready, integrate it with Laravel using the Inertia middleware. You can create a new route in your web.php file to load the Vue component:


Route::get('/todos', function() {
return Inertia::render('TodoComponent');
});


Conclusion

With the Todo app using Laravel, Vuejs, Inertia, and Quasar Framework, you will have a modern and efficient web application for managing your daily tasks. You can further enhance the app with features like drag and drop, filters, and deadlines to make it more powerful and user-friendly.