Composition API is the main feature of Vue3. Hello Developers, How are you doing? Are you looking for how to make a by Vue 3 Composition API? In this tutorial, I will show how to make a CRUD using Vue composition API. For UI design I will use Tailwindcss. If you don’t how to add Tailwindcss in the Vue application you can read this blog How to add Tailwindcss in Vue Js Application

How to do Vue 3 Composition API CRUD with Tailwindcss

Create a vue project using vue CLI

Well, First install a Vue application using Vue CLI. Run this command in your terminal where you want to install your project. Make sure that you have installed Vue CLI before.

vue create composition-api

Well, now you have to wait a couple of minutes for installing a fresh vue project. But remember you have to select some options as a need for your project.

Check Vue CLI version

Note: before run vue create a project this command you can check your vue version by this command.

vue --version //output : @vue/cli 4.5.12

Make a Vue Component for CRUD Operation

Well, Now make a Component composition-api/src/views/Todo.vue. Copy the following code in your component.

<template>
  <div class="container mx-auto">
    <h1 class="mt-8 text-2xl text-center mb-3">Todos</h1>
    <hr class="border m-3 ">
    <div class="mt-3">
      <div class="grid grid-cols-12 gap-4">
        <div class="col-span-6 "
             style="height: 500px">
         <div v-if="todos.length" class="space-y-4 px-1">
              <div v-for="(todo,index) in todos" :key="todo"
               class="p-8 bg-white shadow-md rounded flex items-center justify-between"
                :class="{'bg-green-200': todo.isDone}"
               >
            <div>
              <div>{{ todo.title }}</div>
              <div class="text-gray-500 text-sm">{{ todo.time }}</div>
            </div>
            <div class="space-x-2">
              <button class="px-2 text-red-600"
                    @click="removeTask(index)"
                      title="Remove todo">&times;</button>
              <button v-if="!todo.isDone"
                      class="px-2 text-green-600"
                    @click="taskDone(index)"
                      title="Mark as done">&check;</button>
              <button  v-if="todo.isDone"
                      class="px-2 text-orange-600"
                        @click="taskUndo(index)"
                      title="Mark as undone">&#8630;</button>
            </div>
          </div>
         </div>
          <div v-else
               class="px-8 py-16 bg-white text-gray-700 shadow-md rounded text-sm">
            You dont have any task to do.
          </div>
        </div>

        <div class="col-span-6">
          <div class="p-8 bg-white shadow-md rounded">
            <h2 class="text-xl">Add a todo</h2>
            <input type="text"
                  @keydown.enter="addNewItem"
                   v-model="item"
                   placeholder="Enter your Task "
                   class="p-2 mt-4 border rounded w-full">

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

In the Script Portion Paste belows code

<script>
import { reactive, ref } from '@vue/reactivity'
export default {
    setup(){
        const item = ref(null)
        let todos = reactive([
            {id:1,title : 'One',isDone : true,time : new Date().toString()}
        ])
        const addNewItem = () => {
            todos.unshift({
                id : Math.floor(Math.random() * 100),
                title : item.value,
                isDone : false,
                time : new Date().toString()
            })
            item.value = ''
        }
        const taskDone = (index) => {
            todos[index].isDone = true
        }
        const taskUndo = (index) => {
            todos[index].isDone = false
        }
        const removeTask = (index) => {
            if(confirm('Are you sure ?')){
                todos.splice(index,1)
            }
           
        }
        const print = (e) => console.log(e)
        return {
            todos,
            addNewItem,
            item,
            print,
            taskDone,
            taskUndo,
            removeTask
        }
    }
}
</script>

Well, Our script and template portions have been done. Now time to test our project. Run this code in terminal yarn run dev

Hope it will help you.

Read More : 10 PHP Interview Questions You should know