Creating Todo App using Vue 3 Composition API

The Vue 3 Composition API is a new feature that allows developers to create more maintainable and organized code in their Vue applications. In this article, we will walk through the process of creating a simple Todo App using the Vue 3 Composition API.

Getting Started

To get started, you will need to have Vue 3 installed in your project. You can do this by using the following CDN link in your HTML file:

      
        <script src="https://unpkg.com/vue@next"></script>
      
    

Once Vue 3 is installed, you can create a new Vue instance in your JavaScript file and define a data property for your todo items.

      
        const { ref } = Vue;
        const app = Vue.createApp({
          setup() {
            const todos = ref([
              { text: 'Learn Vue', completed: false },
              { text: 'Build a Todo App', completed: false },
              { text: 'Celebrate', completed: false }
            ]);
            return {
              todos
            };
          }
        });
      
    

Creating the Todo List Component

Next, you can create a new component for displaying the todo list. In the template section of your component, you can use the v-for directive to iterate through the todos array and display each todo item.

      
        app.component('todo-list', {
          template: `
            

              

                {{ todo.text }}
              
            
          `,
          props: ['todos']
        });
      
    

Adding New Todos

To add new todo items, you can create a method in your Vue instance that pushes a new todo object into the todos array.

      
        app.component('add-todo', {
          template: `
            

              
              Add Todo
            
          `,
          data() {
            return {
              newTodo: ''
            };
          },
          methods: {
            addTodo() {
              this.$emit('add', this.newTodo);
              this.newTodo = '';
            }
          }
        });
      
    

Conclusion

In this article, we have covered the basic steps for creating a simple Todo App using the Vue 3 Composition API. The Composition API allows you to organize your code in a more maintainable way and makes it easier to share logic between components. With the knowledge gained from this article, you can build upon the Todo App and create more complex Vue applications using the Composition API.