Vue.js is a powerful JavaScript framework that simplifies building dynamic user interfaces. In this tutorial, you’ll learn how to create a ToDo List using Vue.js and Tailwind CSS. This approach will help you grasp the fundamental concepts of Vue.js while applying modern styles with Tailwind CSS.
Introduction
A ToDo List is a common and useful application for managing daily tasks. In this tutorial, we’ll create a simple app that allows you to add, mark as completed, and remove tasks. We’ll use Vue.js to manage the application’s logic and Tailwind CSS for styling.
Prerequisites
Before we start, ensure you have:
- Basic knowledge of HTML, CSS, and JavaScript.
- Node.js and npm installed on your system (optional, for future advanced setups).
Project Setup
For this tutorial, we’ll use CDNs for Vue.js and Tailwind CSS to keep the setup simple and avoid complex configurations.
Create the HTML File
Start by creating a basic HTML file. This file will include Vue.js and Tailwind CSS from their respective CDNs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js ToDo List</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Vue.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.js"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<!-- Vue.js App will be mounted here -->
<div id="app"></div>
<script>
// Vue.js code will go here
</script>
</body>
</html>Implementing the ToDo List Component
Next, let’s add the Vue.js code to manage our ToDo List. We’ll include this code directly within the HTML file.
Add the Vue.js Code
In your index.html file, replace the <script> tag with the following code:
<script>
const { createApp } = Vue;
createApp({
data() {
return {
newTask: '',
tasks: []
};
},
methods: {
addTask() {
if (this.newTask.trim()) {
this.tasks.push({
id: Date.now(),
text: this.newTask,
completed: false
});
this.newTask = '';
}
},
removeTask(id) {
this.tasks = this.tasks.filter(task => task.id !== id);
}
},
template: `
<div class="p-4 bg-white shadow-md rounded-lg w-full max-w-lg">
<h1 class="text-2xl font-bold mb-4">My ToDo List</h1>
<input
v-model="newTask"
@keyup.enter="addTask"
placeholder="Add a new task"
class="border p-2 w-full mb-4 rounded"
/>
<ul>
<li v-for="task in tasks" :key="task.id" class="flex items-center mb-2">
<input
type="checkbox"
v-model="task.completed"
class="mr-2"
/>
<span :class="{ 'line-through': task.completed }" class="flex-grow">
{{ task.text }}
</span>
<button
@click="removeTask(task.id)"
class="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600"
>
Delete
</button>
</li>
</ul>
</div>
`
}).mount('#app');
</script>Code Explanation
Vue.js Structure
- data: Defines the initial state of the application, including the new task input and the list of tasks.
- methods: Contains methods to add and remove tasks.
- template: Defines the HTML structure of the application, using Vue.js syntax to bind data and handle events.
Tailwind CSS Styles
- bg-gray-100: Applies a light gray background to the page.
- bg-white: Sets a white background for the ToDo List container.
- shadow-md: Adds a medium shadow to the container.
- rounded-lg: Rounds the corners of the container.
- border: Adds a border to the input field.
- text-2xl: Defines a large text size for the title.
- mb-4: Applies a bottom margin to elements.
Testing and Deploying the Application
To test your application, save the index.html file and open it in a web browser. You should see your ToDo List app in action. You can add new tasks, mark them as completed, and remove them using the provided buttons.
When you’re ready to deploy your application, simply upload the index.html file to your production server. Since we’re not using additional build tools, this file is all you need.
Conclusion
In this tutorial, we created a ToDo List using Vue.js and Tailwind CSS. You’ve learned how to set up a basic Vue.js project, manage data, and style your application with Tailwind CSS. This foundational knowledge will help you build more advanced and dynamic web applications. Continue exploring Vue.js and Tailwind CSS to enhance your web development skills!
