Aplikasi Todo Vue 3

Aplikasi todo sederhana yang dibangun dengan Vue 3 dan Vite untuk manajemen tugas

vue3vitejavascripttodo-appmanajemen-tugas

Bagikan proyek ini:

Tentang Proyek

Aplikasi Todo Sederhana dengan Vue 3 (Simple Todo App with Vue 3)

Aplikasi todo yang bersih dan fungsional, dibangun dengan Vue 3 dan Vite. Menampilkan pola reaktif modern dan antarmuka pengguna yang responsif untuk manajemen tugas yang efisien.

Tangkapan Layar Aplikasi Todo

📋 Ringkasan

Ini adalah repositori aplikasi todo sederhana yang dibangun dengan Vue 3, mendemonstrasikan Composition API dan fitur-fitur Vue modern yang ditenagai oleh lingkungan pengembangan Vite yang sangat cepat.

✨ Fitur

  • Manajemen Tugas

    • Menambah todo baru.
    • Menandai tugas yang sudah selesai.
    • Menghapus todo.
    • Mengedit tugas yang sudah ada.

  • Vue 3 Modern

    • Composition API.
    • Penanganan data reaktif.
    • Arsitektur berbasis komponen.

  • Pengalaman Pengguna

    • Antarmuka yang bersih dan intuitif.
    • Desain responsif.
    • Animasi yang halus.
    • Persistensi data menggunakan Local Storage.

🛠️ Teknologi yang Digunakan

  • Vue 3: Framework JavaScript progresif.
  • Vite: Alat build frontend generasi berikutnya.
  • JavaScript (ES6+): Fitur JavaScript modern.
  • CSS3: Gaya dan animasi.
  • Local Storage: Penyimpanan data di browser.

📁 Struktur Proyek

todo-app-vue-3/
├── src/
│   ├── components/        # Komponen Vue
│   ├── composables/       # Logika yang dapat digunakan kembali
│   ├── assets/           # Aset statis
│   ├── App.vue          # Komponen akar
│   └── main.js          # Titik masuk aplikasi
├── public/              # File statis publik
├── index.html          # Template HTML
├── vite.config.js      # Konfigurasi Vite
└── README.md

🚀 Memulai

Prasyarat

  • Node.js v18.0.0 atau lebih tinggi.
  • Manajer paket npm atau yarn.

Langkah Instalasi

  1. Clone Repositori

    git clone <repository-url>
cd todo-app-vue-3

  2. Install Dependensi

    npm install

  3. Jalankan Server Pengembangan

    npm run dev

  4. Akses Aplikasi Buka browser dan kunjungi: http://localhost:5173

💻 Penggunaan

  • Menambah Todo: Ketik tugas Anda di kolom input dan tekan Enter.
  • Menyelesaikan Todo: Klik centang pada tugas yang telah selesai.
  • Mengedit Todo: Klik dua kali pada teks tugas untuk mengubahnya.
  • Menghapus Todo: Klik tombol hapus (×) pada tugas.
  • Filter: Gunakan filter "Semua", "Aktif", atau "Selesai" untuk menyaring daftar.

🎓 Konsep Pembelajaran

Proyek ini mendemonstrasikan pengunaan Vue 3 Composition API, desain komponen, manajemen state lokal, penanganan event, computed properties, lifecycle hooks, dan integrasi Local Storage.

Selamat Mengelola Tugas! ✓✨
Daftar todo yang sederhana dan efektif dengan Vue 3!