Introduction
Managing tasks efficiently is crucial for both personal productivity and team collaboration. Whether you're working on a small project or a large enterprise application, having a task management system that is easy to use and customizable can make a huge difference. In this tutorial, we will show you how to build a simple, yet powerful task management app using Laravel for the backend and Vue.js for the frontend.
This project will cover:
- Setting up Laravel for API Development
- Building Vue.js Components for Task Management
- Connecting the Frontend and Backend
- Implementing Authentication with Laravel Passport
- Creating a User-Friendly Interface
- Final Touches and Deployment Tips
By the end of this tutorial, you’ll have a fully functioning task management app that you can customize further according to your needs. Let’s get started!
Prerequisites
Before we begin, make sure you have the following:
- PHP 8+ (for Laravel)
- Composer (for managing PHP dependencies)
- Node.js (for running Vue.js)
- NPM (for managing JavaScript dependencies)
- MySQL or SQLite (for database management)
You’ll also need a basic understanding of Laravel and Vue.js. If you’re new to either, don’t worry! We’ll guide you through each step.
Step 1: Setting up the Backend (Laravel)
1.1 Installing Laravel
First, let's create a new Laravel project. Open your terminal and run the following command:
composer create-project --prefer-dist laravel/laravel task-manager
This will create a new Laravel project in a folder called task-manager. Once the installation is complete, navigate into the project directory:
cd task-manager
1.2 Setting up Authentication
For this task management app, we’ll use Laravel Passport to handle authentication. Laravel Passport provides a full OAuth2 server implementation for API authentication.
First, install Passport by running:
composer require laravel/passport
Next, run the Passport migration:
php artisan migrate
Then, install Passport:
php artisan passport:install
Once installed, add the HasApiTokens trait to the User model:
use Laravel\Passport\HasApiTokens;
class User extends Authenticatable
{
use HasApiTokens;
}
And in AuthServiceProvider or AppServiceProvider for laravel 11, add the following:
use Laravel\Passport\Passport;
public function boot()
{
$this->registerPolicies();
Passport::routes();
}
1.3 Creating Task Model and Migration
Now, let’s create the Task model and migration. In your terminal, run the following:
php artisan make:model Task -m
This will create a model file at app/Models/Task.php and a migration file in database/migrations/.
In the migration file, define the fields for our tasks:
public function up()
{
Schema::create('tasks', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('description');
$table->boolean('completed')->default(false);
$table->foreignId('user_id')->constrained()->onDelete('cascade');
$table->timestamps();
});
}
Run the migration to create the tasks table in the database:
php artisan migrate
1.4 Creating API Routes and Controllers
Now, let’s create a controller to handle task-related operations. Run:
php artisan make:controller TaskController
In TaskController.php, define methods for creating, updating, and deleting tasks:
public function index(Request $request)
{
return Task::where('user_id', $request->user()->id)->get();
}
public function store(Request $request)
{
$validated = $request->validate([
'title' => 'required|string|max:255',
'description' => 'nullable|string',
]);
$task = $request->user()->tasks()->create($validated);
return response()->json($task, 201);
}
public function update(Request $request, $id)
{
$task = Task::findOrFail($id);
if ($task->user_id !== $request->user()->id) {
return response()->json(['error' => 'Unauthorized'], 403);
}
$task->update($request->only(['title', 'description', 'completed']));
return response()->json($task);
}
public function destroy(Request $request, $id)
{
$task = Task::findOrFail($id);
if ($task->user_id !== $request->user()->id) {
return response()->json(['error' => 'Unauthorized'], 403);
}
$task->delete();
return response()->json(null, 204);
}
In routes/api.php, define the API routes:
Route::middleware('auth:api')->group(function () {
Route::resource('tasks', TaskController::class);
});
Step 2: Building the Frontend (Vue.js)
2.1 Setting up Vue.js
Now, let’s move to the frontend. First, make sure you’re in the root directory of the Laravel project and run:
npm install
Then, install Vue.js and Vue Router:
npm install vue@next vue-router@next
Create a Vue component for the task list:
// resources/js/components/TaskList.vue
<template>
<div>
<h1>Task List</h1>
<ul>
<li v-for="task in tasks" :key="task.id">{{ task.title }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
tasks: [],
};
},
mounted() {
this.fetchTasks();
},
methods: {
fetchTasks() {
axios.get('/api/tasks').then((response) => {
this.tasks = response.data;
});
},
},
};
</script>
2.2 Setting up Vue Router and Axios
In resources/js/app.js, set up Vue and Vue Router:
import { createApp } from 'vue';
import axios from 'axios';
import VueRouter from 'vue-router';
import TaskList from './components/TaskList.vue';
const app = createApp({});
app.config.globalProperties.$http = axios;
app.use(VueRouter);
const routes = [
{ path: '/', component: TaskList },
];
const router = new VueRouter({
routes,
});
app.use(router);
app.mount('#app');
Step 3: Connecting the Frontend and Backend
3.1 API Integration
In TaskList.vue, ensure your axios requests are pointing to the correct API endpoints. You’ll use the authentication tokens generated by Passport for this purpose.
3.2 Building the UI
To make the app more user-friendly, use Tailwind CSS to style the app. If you haven’t installed Tailwind CSS yet, follow the official documentation to set it up.
You can add beautiful UI components like task creation forms, modals for editing tasks, and more.
Step 4: Implementing Authentication
To handle user authentication, you’ll integrate JWT authentication using Laravel Passport and Vue.js. Make sure to use the login and registration functionality, ensuring only authenticated users can access their tasks.
Conclusion
You’ve now built a task management app with Laravel for the backend and Vue.js for the frontend. The app includes user authentication, API integration, task CRUD functionality, and a clean user interface. This tutorial has shown you how to work with both Laravel and Vue.js to create a full-stack web application.
With this basic structure in place, you can expand the functionality by adding features like task prioritization, due dates, notifications, and more. Enjoy building your own task management app!
