Creating a basic application with Vue.js

Creating a basic application with Vue.js is a great way to get started with this popular JavaScript framework. In this example, we’ll build a simple task management application. After creating the application, we’ll write a blog post about it.

Building a Basic Task Management App with Vue.js

Introduction

Vue.js is a progressive JavaScript framework that makes building user interfaces easy and efficient. In this tutorial, we’ll create a basic task management application using Vue.js. This project will demonstrate the fundamental concepts of Vue.js, including data binding, component creation, and event handling.

Prerequisites

Before getting started, ensure you have Node.js and npm (Node Package Manager) installed on your machine. You can download them from nodejs.org.

Setting up the Project

Let’s start by setting up our Vue.js project.

1. Open your terminal and navigate to the directory where you want to create your project.
2. Use the Vue CLI (Command Line Interface) to create a new Vue.js project. If you don’t have Vue CLI installed, you can install it globally by running:

   npm install -g @vue/cli

3. Create a new Vue project:

   vue create vue-task-manager

Follow the prompts to configure your project. You can select the default settings for this basic project.

4. Once the project is created, navigate to the project directory:

   cd vue-task-manager

5. Start the development server:

   npm run serve

Your Vue.js application should now be running at http://localhost:8080/. You can access it in your web browser.

Building the Task Management App

Now, let’s build our basic task management app step by step.

Creating the Task Component

In Vue.js, components are reusable building blocks. We’ll create a Task component to represent individual tasks.

1. Inside the src directory, create a new file called Task.vue.
2. In Task.vue, define the component as follows:

   <template>
     <div class="task">
       <input type="checkbox" v-model="task.completed" />
       <span :class="{ completed: task.completed }">{{ task.text }}</span>
       <button @click="deleteTask">Delete</button>
     </div>
   </template>

   <script>
   export default {
     props: ['task'],
     methods: {
       deleteTask() {
         this.$emit('delete', this.task.id);
       },
     },
   };
   </script>

   <style scoped>
   .completed {
     text-decoration: line-through;
   }
   </style>

This component displays a task with a checkbox, task text, and a delete button.

Creating the App Component

Next, let’s create the main App component that will manage our tasks.

1. In the src directory, open App.vue.
2. Modify App.vue as follows:

   <template>
     <div class="app">
       <h1>Task Manager</h1>
       <input v-model="newTask" @keyup.enter="addTask" placeholder="Add a new task" />
       <div v-for="task in tasks" :key="task.id">
         <Task :task="task" @delete="deleteTask" />
       </div>
     </div>
   </template>

   <script>
   import Task from './components/Task.vue';

   export default {
     components: {
       Task,
     },
     data() {
       return {
         newTask: '',
         tasks: [],
         nextTaskId: 1,
       };
     },
     methods: {
       addTask() {
         if (this.newTask.trim() === '') return;
         this.tasks.push({
           id: this.nextTaskId++,
           text: this.newTask,
           completed: false,
         });
         this.newTask = '';
       },
       deleteTask(id) {
         this.tasks = this.tasks.filter((task) => task.id !== id);
       },
     },
   };
   </script>

   <style>
   /* Add your CSS styles here */
   </style>

In this component, we have an input field to add new tasks and a list of tasks rendered using the Task component.

Styling the App

You can add CSS styles to your app by modifying the <style> sections in your components.

Conclusion

Congratulations! You’ve built a basic task management app with Vue.js. This project introduced you to the fundamental concepts of Vue.js, such as components, data binding, and event handling.

You can enhance this app by adding features like task editing, filtering tasks, and persisting tasks in a database. Vue.js provides a powerful and flexible framework for building web applications, making it an excellent choice for both simple and complex projects.

Now that you have a basic understanding of Vue.js, feel free to explore more advanced topics and build even more impressive web applications.

Happy coding!