Kursus Lengkap Vue.js 3: Bangun Dua Aplikasi Sambil Belajar

Daftar Isi

Pengantar Vue.js 3
Persiapan Lingkungan Pengembangan
Dasar-dasar Vue.js 3
Membangun Aplikasi ToDo List
Membangun Aplikasi Cuaca
Penutup dan Langkah Selanjutnya

1. Pengantar Vue.js 3

Vue.js adalah framework JavaScript progresif yang digunakan untuk membangun antarmuka pengguna. Vue.js 3 membawa banyak peningkatan performa dan fitur baru yang memudahkan pengembangan aplikasi modern.

Dalam kursus ini, Anda akan belajar Vue.js 3 dengan membangun dua aplikasi nyata: ToDo List dan Aplikasi Cuaca. Dengan pendekatan praktis ini, Anda akan memahami konsep dasar hingga lanjutan Vue.js 3.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai coding, kita perlu menyiapkan lingkungan pengembangan. Berikut adalah alat dan software yang dibutuhkan:

Node.js versi terbaru (unduh dari nodejs.org )
Code editor seperti Visual Studio Code
Terminal atau command prompt
Browser modern (Chrome, Firefox, Edge, Safari)

Setelah menginstal Node.js dan editor, kita akan menggunakan Vue CLI untuk membuat proyek Vue.js baru. Jalankan perintah berikut di terminal:

npm install -g @vue/cli
vue create nama-proyek-anda

Ikuti instruksi di layar untuk memilih preset default. Setelah selesai, masuk ke folder proyek dan jalankan:

cd nama-proyek-anda
npm run serve

Buka browser dan akses http://localhost:8080 untuk melihat aplikasi Vue.js Anda berjalan.

3. Dasar-dasar Vue.js 3

Vue.js 3 menggunakan Composition API yang lebih fleksibel dibandingkan Options API. Berikut contoh sederhana komponen Vue 3 menggunakan Composition API:

<template>
  <div>
    <h1>Halo, {{ nama }}!</h1>
    <input v-model="nama" placeholder="Masukkan nama Anda" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const nama = ref('Dunia')
</script>

Penjelasan singkat:

ref digunakan untuk membuat data reaktif.
v-model menghubungkan input dengan data reaktif.
Template menampilkan data secara dinamis.

Ilustrasi kode Vue.js 3 dengan Composition API dan konsep reaktivitas data menggunakan ref dan v-model

4. Membangun Aplikasi ToDo List

Mari kita buat aplikasi ToDo List sederhana untuk mengelola tugas harian. Aplikasi ini memungkinkan menambah, menandai selesai, dan menghapus tugas.

Struktur Komponen

App.vue : Komponen utama yang menampung daftar tugas.
TodoItem.vue : Komponen untuk setiap item tugas.

Kode App.vue

<template>
  <div class="max-w-xl mx-auto p-4 border rounded shadow">
    <h2 class="text-2xl font-bold mb-4">ToDo List</h2>
    <form @submit.prevent="tambahTugas" class="mb-4 flex gap-2">
      <input
        v-model="tugasBaru"
        type="text"
        placeholder="Tambah tugas baru"
        class="flex-grow border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
        required
      />
      <button
        type="submit"
        class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition"
      >Tambah</button>
    </form>
    <ul>
      <todo-item
        v-for="(tugas, index) in daftarTugas"
        :key="tugas.id"
        :tugas="tugas"
        @hapus="hapusTugas(index)"
        @toggle-selesai="toggleSelesai(index)"
      />
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TodoItem from './components/TodoItem.vue'

const tugasBaru = ref('')
const daftarTugas = ref([])

function tambahTugas() {
  daftarTugas.value.push({
    id: Date.now(),
    teks: tugasBaru.value,
    selesai: false,
  })
  tugasBaru.value = ''
}

function hapusTugas(index) {
  daftarTugas.value.splice(index, 1)
}

function toggleSelesai(index) {
  daftarTugas.value[index].selesai = !daftarTugas.value[index].selesai
}
</script>

Kode TodoItem.vue

<template>
  <li
    class="flex items-center justify-between mb-2 p-2 border rounded hover:bg-gray-50"
  >
    <label class="flex items-center gap-3 cursor-pointer">
      <input
        type="checkbox"
        :checked="tugas.selesai"
        @change="$emit('toggle-selesai')"
        class="w-5 h-5"
      />
      <span
        :class="{
          'line-through text-gray-400': tugas.selesai,
          'text-gray-900': !tugas.selesai,
        }"
      >{{ tugas.teks }}</span>
    </label>
    <button
      @click="$emit('hapus')"
      class="text-red-600 hover:text-red-800"
      aria-label="Hapus tugas"
    >
      <i class="fas fa-trash-alt"></i>
    </button>
  </li>
</template>

<script setup>
defineProps({
  tugas: Object,
})
</script>

Ilustrasi aplikasi ToDo List berbasis Vue.js 3 dengan daftar tugas, checkbox selesai, dan tombol hapus di antarmuka pengguna

5. Membangun Aplikasi Cuaca

Selanjutnya, kita akan membuat aplikasi cuaca sederhana yang mengambil data dari API OpenWeatherMap dan menampilkan kondisi cuaca berdasarkan kota yang dimasukkan pengguna.

Langkah 1: Mendapatkan API Key

Daftar dan dapatkan API key gratis di OpenWeatherMap .

Langkah 2: Struktur Komponen

App.vue : Komponen utama yang menampilkan form input dan hasil cuaca.

Kode App.vue

<template>
  <div class="max-w-xl mx-auto p-4 border rounded shadow">
    <h2 class="text-2xl font-bold mb-4">Aplikasi Cuaca</h2>
    <form @submit.prevent="cariCuaca" class="mb-4 flex gap-2">
      <input
        v-model="kota"
        type="text"
        placeholder="Masukkan nama kota"
        class="flex-grow border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
        required
      />
      <button
        type="submit"
        class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition"
      >Cari</button>
    </form>

    <div v-if="cuaca" class="bg-blue-50 p-4 rounded shadow">
      <h3 class="text-xl font-semibold mb-2">Cuaca di {{ cuaca.name }}</h3>
      <p class="mb-1">Suhu: {{ cuaca.main.temp }} °C</p>
      <p class="mb-1">Kelembapan: {{ cuaca.main.humidity }}%</p>
      <p class="mb-1">Deskripsi: {{ cuaca.weather[0].description }}</p>
      <img
        :src="`https://openweathermap.org/img/wn/${cuaca.weather[0].icon}@2x.png`"
        :alt="`Ikon cuaca ${cuaca.weather[0].description}`"
        class="w-20 h-20"
      />
    </div>

    <p v-if="error" class="text-red-600 mt-4">{{ error }}</p>
  </div>
</template>

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

const kota = ref('')
const cuaca = ref(null)
const error = ref('')

const API_KEY = 'YOUR_API_KEY_HERE' // Ganti dengan API key Anda

async function cariCuaca() {
  error.value = ''
  cuaca.value = null
  try {
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${kota.value}&units=metric&appid=${API_KEY}`
    )
    if (!response.ok) {
      throw new Error('Kota tidak ditemukan')
    }
    const data = await response.json()
    cuaca.value = data
  } catch (err) {
    error.value = err.message
  }
}
</script>