Vue.js 101 : Creating Current Todo Component

Screenshot from the tutorial

Vue.js 101: Creating a Current Todo Component

In this blog post, we will dive into the fundamentals of Vue.js by creating a simple Current Todo component. This tutorial is designed for beginners who want to get hands-on experience with Vue.js and understand how components work. We will cover the essential concepts through a practical example, making it easy to follow along.

What is Vue.js?

Vue.js is a progressive JavaScript framework used for building user interfaces. It allows developers to create interactive web applications by leveraging a component-based architecture. This modularity makes it easy to manage, test, and reuse code.

Prerequisites

Before we start, ensure you have the following:

• Basic understanding of HTML, CSS, and JavaScript.
• Node.js and npm installed on your machine.

Setting Up the Vue Project

To get started, we need to set up a new Vue.js project. You can use Vue CLI for this purpose.

Step 1: Install Vue CLI

If you haven't installed Vue CLI yet, open your terminal and execute the following command:

npm install -g @vue/cli

Step 2: Create a New Vue Project

Now, create a new Vue project by running:

vue create current-todo

Follow the prompts to set up your project. Once the setup is complete, navigate into your project directory:

cd current-todo

Step 3: Start the Development Server

Launch the development server to see your app in action:

npm run serve

Open your web browser and navigate to http://localhost:8080. You should see your new Vue.js app running.

Creating the Current Todo Component

Now that we have our project set up, let's create the Current Todo component.

Step 1: Generate the Component

In your project directory, navigate to the src/components folder. Create a new file named CurrentTodo.vue.

Step 2: Structure the Component

Open CurrentTodo.vue and add the following code:

<template>
  <div class="current-todo">
    <h2>Current Todo</h2>
    <input v-model="todo" placeholder="Add a new todo" />
    <button @click="addTodo">Add Todo</button>
    <ul>
      <li v-for="(item, index) in todos" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.todo.trim()) {
        this.todos.push(this.todo);
        this.todo = '';
      }
    }
  }
};
</script>

<style scoped>
.current-todo {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>

Component Breakdown

• Template: This section includes a heading, an input field to enter new todos, a button to add the todo, and a list to display all todos.
• Script: In the script section, we define the data properties (todo and todos) and a method (addTodo) to handle adding new todos.
• Style: Basic styles are added to improve the component's appearance.

Step 3: Integrate the Component

To use the CurrentTodo component, open the src/App.vue file and import the component as follows:

<template>
  <div id="app">
    <CurrentTodo />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    CurrentTodo
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Step 4: Test the Application

Now that everything is set up, save your changes and go back to your browser. You should see the Current Todo component displayed on the page. You can add new todos by typing in the input field and clicking the "Add Todo" button.

Conclusion

Congratulations! You have successfully created a Current Todo component using Vue.js. This tutorial demonstrated the basics of component creation, data binding, and event handling. As you become more comfortable with Vue.js, you can explore additional features such as state management, routing, and API integration.

For further learning, consider exploring the official Vue.js documentation and experimenting with more complex components and applications.

Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios