Vue.js 101 : Creating Get Todo Component 4 minutes

Screenshot from the tutorial

Vue.js 101: Creating a "Get Todo" Component

Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications. In this tutorial, we will learn how to create a simple "Get Todo" component using Vue.js. This component will allow you to fetch a list of todos from an API and display them on your web page.

Prerequisites

Before we get started, make sure you have the following:

1. Basic understanding of JavaScript and HTML.
2. Node.js and npm installed on your machine.
3. A code editor, like Visual Studio Code, to write your code.

Setting Up Your Vue.js Project

To create a new Vue.js project, you will need to install the Vue CLI if you haven't done so already. Open your terminal and run:

npm install -g @vue/cli

Once the Vue CLI is installed, you can create a new project by running:

vue create todo-app

Choose the default settings for your project. After the installation is complete, navigate to your project directory:

cd todo-app

Now, start your development server:

npm run serve

You should see your application running at http://localhost:8080.

Creating the Get Todo Component

Let’s create a new component for fetching and displaying todos. Follow these steps:

1. Create a New Component File

Inside the src/components directory, create a new file named GetTodo.vue. Open this file in your code editor and add the following code:

<template>
  <div>
    <h1>Todo List</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: []
    };
  },
  created() {
    this.fetchTodos();
  },
  methods: {
    async fetchTodos() {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos');
        this.todos = await response.json();
      } catch (error) {
        console.error('Error fetching todos:', error);
      }
    }
  }
};
</script>

<style scoped>
h1 {
  text-align: center;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}
</style>

2. Breaking Down the Code

• Template: The <template> section contains the HTML structure. We have a heading and an unordered list that will display the todos.

• Script:

  • The data function returns an object with a todos array to store the fetched todo items.
  • The created lifecycle hook calls the fetchTodos method as soon as the component is created.
  • The fetchTodos method uses the Fetch API to get the todos from a placeholder API and assigns the result to the todos array.

• Style: The <style scoped> section contains the styles for our component. The styles ensure that the styles defined here do not affect other components.

3. Importing and Using the Component

Now that we have created the GetTodo component, let's use it in our main application. Open the src/App.vue file and modify it to include the new component:

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

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

export default {
  components: {
    GetTodo
  }
};
</script>

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

4. Running Your Application

Once you have saved your changes, go back to your terminal and ensure your development server is still running. If everything is set up correctly, you should see your Todo List displayed in the browser.

Conclusion

Congratulations! You have successfully created a simple "Get Todo" component using Vue.js. This component fetches data from an API and displays it in your application.

Feel free to enhance this component by adding features like loading states, error handling, and styling to improve the user experience.

Next Steps

1. Explore Vue Router to handle navigation.
2. Use Vuex for state management in larger applications.
3. Consider adding more functionality such as adding, deleting, or editing todos.

With this foundational knowledge, you can build more complex applications using Vue.js. 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