Belajar Vue 3: instalasi sampai pola komponen

Vue 3 adalah framework yang paling ramah untuk pindah dari HTML/JS biasa ke aplikasi reaktif — template-nya masih terasa seperti HTML. Tutorial ini dari instalasi sampai pola komponen yang kupakai di project nyata.

1. Instalasi

Prasyarat: Node.js 20+. Scaffold project resmi (Vite di dalamnya):

npm create vue@latest toko-app
# jawab pertanyaannya (TypeScript? Router? Pinia?) — untuk belajar, pilih No dulu semua
cd toko-app
npm install
npm run dev          # buka http://localhost:5173

2. Anatomi Single File Component (SFC)

Satu file .vue = logic + template + style dalam satu tempat:

<script setup>
import { ref, computed } from "vue";

const keranjang = ref([]);                    // state reaktif
const total = computed(() =>                  // nilai turunan — hitung otomatis
  keranjang.value.reduce((s, item) => s + item.harga, 0)
);

function tambah(item) {
  keranjang.value.push(item);
}
</script>

<template>
  <button @click="tambah({ nama: 'Kopi', harga: 25000 })">Tambah Kopi</button>
  <p>{{ keranjang.length }} item — total Rp {{ total.toLocaleString("id-ID") }}</p>
</template>

Tiga hal yang perlu kamu hafal dari contoh ini:

• ref() membungkus nilai jadi reaktif — di <script> aksesnya keranjang.value, di template cukup keranjang.
• computed() untuk nilai turunan — jangan simpan total sebagai state terpisah (anti-pola yang sama dengan React).
• @click adalah singkatan v-on:click.

3. Form dua arah dengan v-model

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

<template>
  <input v-model="nama" placeholder="Nama produk" />
  <p>Preview: {{ nama || "(kosong)" }}</p>
</template>

v-model = binding dua arah — mengetik di input langsung mengubah nama, dan sebaliknya. Ini yang membuat form di Vue terasa jauh lebih ringkas daripada onChange + setState.

4. Komponen: props turun, event naik

<!-- ProdukCard.vue -->
<script setup>
defineProps({ nama: String, harga: Number });
const emit = defineEmits(["beli"]);
</script>

<template>
  <article class="card">
    <h3>{{ nama }}</h3>
    <p>Rp {{ harga.toLocaleString("id-ID") }}</p>
    <button @click="emit('beli')">Beli</button>
  </article>
</template>

<!-- Dipakai di parent -->
<ProdukCard v-for="p in produk" :key="p.id" :nama="p.nama" :harga="p.harga" @beli="tambah(p)" />

Aturan emasnya sama seperti framework mana pun: data mengalir turun lewat props, perubahan naik lewat event. Jangan pernah mutasi props dari anak.

Tips dari pengalaman

• Selalu beri :key unik di v-for — tanpa itu Vue mendaur ulang DOM dengan cara yang bisa bikin bug halus.
• Mulai tanpa Pinia/Router; tambahkan saat benar-benar butuh. Banyak aplikasi kecil cukup dengan ref + props.
• <script setup> adalah cara modern — kalau tutorial lain memakai export default { data() ... }, itu Options API lama; keduanya jalan, tapi pelajari Composition API duluan.