Showing Posts From

Index

Building a Dynamic To-Do List Application with Vue.js A Step-by-Step Guide

IntroductionIn the world of web development, creating a simple yet functional application is a great way to grasp the fundamentals of a framework. In this tutorial, we will build a dynamic To-Do List application using Vue.js, one of the most popular JavaScript frameworks. This project will help you understand the core concepts of Vue.js, including data binding, components, and reactivity. PrerequisitesBefore we dive in, make sure you have the following:Basic knowledge of HTML, CSS, and JavaScript. Node.js and npm installed on your machine. A code editor (like VSCode) for writing your code.Step 1: Setting Up the ProjectFirst, let's create a new Vue.js project using Vue CLI. If you haven't installed Vue CLI yet, you can do so with npm: npm install -g @vue/cliNow, create a new project: vue create todo-appFollow the prompts to set up your project. Once created, navigate to the project directory: cd todo-appTo start the development server, run: npm run serveOpen your browser and navigate to http://localhost:8080 to see your Vue.js app in action! Step 2: Creating the To-Do List ComponentNow that we have our Vue app running, let's create a new component for our To-Do List. Inside the src/components directory, create a file named TodoList.vue. <template> <div> <h1>My To-Do List</h1> <input v-model="newTask" @keyup.enter="addTask" placeholder="Add a new task" /> <ul> <li v-for="(task, index) in tasks" :key="index"> <input type="checkbox" v-model="task.completed" /> <span :class="{ completed: task.completed }">{{ task.text }}</span> <button @click="removeTask(index)">Delete</button> </li> </ul> </div> </template><script> export default { data() { return { newTask: '', tasks: [], }; }, methods: { addTask() { if (this.newTask.trim()) { this.tasks.push({ text: this.newTask, completed: false }); this.newTask = ''; } }, removeTask(index) { this.tasks.splice(index, 1); }, }, }; </script><style scoped> .completed { text-decoration: line-through; color: gray; } </style>Step 3: Using the Component in Your AppNext, we need to use our TodoList component in the main application. Open src/App.vue and replace the default content with the following: <template> <div id="app"> <TodoList /> </div> </template><script> import TodoList from './components/TodoList.vue';export default { components: { TodoList, }, }; </script><style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Step 4: Styling Your ApplicationTo give your To-Do List a more appealing look, you can add some CSS styles in the App.vue or the TodoList.vue component. Here’s a simple style you can add to TodoList.vue: input { margin: 10px 0; padding: 10px; width: 80%; }button { margin-left: 10px; }Step 5: Adding Local Storage FunctionalityTo make our application more useful, let’s save the tasks in the browser's local storage. Update the mounted and beforeDestroy lifecycle hooks in your TodoList.vue component: mounted() { const savedTasks = JSON.parse(localStorage.getItem('tasks')); if (savedTasks) { this.tasks = savedTasks; } }, beforeDestroy() { localStorage.setItem('tasks', JSON.stringify(this.tasks)); },ConclusionCongratulations! You've just built a simple To-Do List application using Vue.js. This project has introduced you to the basics of Vue.js, including components, data binding, and local storage. You can further enhance your application by adding features such as editing tasks, filtering completed tasks, or even integrating a backend service. Feel free to share your thoughts in the comments below or let us know if you have any questions. Happy coding! This tutorial not only provides a hands-on approach to learning Vue.js but also encourages creativity and further exploration of the framework’s capabilities.