Bikin Todo List dengan Vue 3 dan Composition API dalam 10 Menit!

Apakah Anda ingin membuat aplikasi Todo List sederhana dengan Vue 3 dan Composition API? Dalam artikel ini, kami akan memandu Anda langkah demi langkah untuk membuatnya hanya dalam 10 menit!

Vue 3 adalah framework JavaScript yang powerful dan mudah dipelajari. Dengan fitur Composition API, Anda bisa menulis kode yang lebih terstruktur dan mudah dikelola. Todo List adalah proyek sempurna untuk memulai belajar Vue 3.
📌 Baca juga: Pengenalan Next.js: Cara Kerja dan Keunggulannya

Langkah 1: Setup Project

Pertama, pastikan Anda sudah menginstall Node.js dan Vue CLI. Jika belum, jalankan perintah berikut:

npm install -g @vue/cli

Kemudian, buat project Vue baru:

vue create todo-list

Pilih Vue 3 saat diminta memilih versi.

Langkah 2: Buat Komponen Todo List

Buka file src/components/TodoList.vue dan tambahkan kode berikut:

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Tambahkan tugas baru" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">Hapus</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const newTodo = ref('');
    const todos = ref([]);

    const addTodo = () => {
      if (newTodo.value.trim() !== '') {
        todos.value.push(newTodo.value);
        newTodo.value = '';
      }
    };

    const removeTodo = (index) => {
      todos.value.splice(index, 1);
    };

    return { newTodo, todos, addTodo, removeTodo };
  },
};
</script>

Langkah 3: Gunakan Komponen di App.vue

Buka src/App.vue dan ganti kode dengan:

<template>
  <TodoList />
</template>

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

export default {
  components: {
    TodoList,
  },
};
</script>

Langkah 4: Jalankan Aplikasi

Terakhir, jalankan aplikasi dengan perintah:

npm run serve

Buka browser dan akses http://localhost:8080. Voila! Todo List Anda sudah siap digunakan.

Kesimpulan

Dalam 10 menit, Anda telah berhasil membuat aplikasi Todo List sederhana menggunakan Vue 3 dan Composition API. Vue 3 menawarkan fleksibilitas dan kemudahan dalam pengembangan aplikasi web modern.

Jika Anda ingin mempelajari lebih lanjut tentang Vue 3, kunjungi dokumentasi resmi Vue.