Vue 3 Composition API: Pola yang Benar untuk Project Nyata

Vue 3 Composition API: Pola yang Benar untuk Project Nyata - Vue 3 memperkenalkan Composition API sebagai alternatif dari Options API. Banyak developer langsung menggunakannya karena lebih fleksibel dan modern.

Masalahnya, banyak implementasi Composition API yang justru membuat file semakin berantakan ketika project membesar.

Di artikel ini kita akan membahas pola Composition API yang benar untuk project nyata, bukan sekadar contoh counter sederhana.

Kenapa Banyak Project Vue 3 Jadi Berantakan?

Contoh yang sering terjadi:

<script setup>
const users = ref([])
const loading = ref(false)
const error = ref(null)

const fetchUsers = async () => {
  loading.value = true
  try {
    const res = await $fetch('/api/users')
    users.value = res
  } catch (e) {
    error.value = e
  } finally {
    loading.value = false
  }
}

const deleteUser = async (id) => {
  await $fetch(`/api/users/${id}`, { method: 'DELETE' })
}

onMounted(fetchUsers)
</script>

Awalnya terlihat normal. Tapi ketika fitur bertambah:

• File jadi 400–600 baris
• Logic campur UI
• Sulit di-maintain
• Testing susah

Itulah kenapa kita butuh pola yang lebih rapi.

---

Pola yang Benar: Separation of Concerns

Prinsip utama project besar adalah pisahkan tanggung jawab.

• UI → Component
• Logic → Composable
• API Call → Service
• Global State → Store (Pinia)

---

1️⃣ Composable untuk Logic Reusable

Buat folder composables/ lalu buat file:

composables/useUsers.js

import { ref } from 'vue'
import { usersService } from '@/services/usersService'

export function useUsers() {
  const users = ref([])
  const loading = ref(false)
  const error = ref(null)

  const fetchUsers = async () => {
    loading.value = true
    error.value = null
    try {
      users.value = await usersService.list()
    } catch (e) {
      error.value = e
    } finally {
      loading.value = false
    }
  }

  const removeUser = async (id) => {
    await usersService.remove(id)
    await fetchUsers()
  }

  return { users, loading, error, fetchUsers, removeUser }
}

Sekarang logic sudah terpisah dari komponen.

---

2️⃣ Service untuk API Call

services/usersService.js

export const usersService = {
  async list() {
    return await $fetch('/api/users')
  },
  async remove(id) {
    return await $fetch(`/api/users/${id}`, {
      method: 'DELETE'
    })
  }
}

Dengan pola ini, kalau besok kamu ganti backend atau baseURL, cukup ubah di satu tempat.

---

3️⃣ Component Fokus ke UI

<script setup>
const { users, loading, fetchUsers, removeUser } = useUsers()
onMounted(fetchUsers)
</script>

<template>
  <div>
    <h1>User List</h1>

    <div v-if="loading">Loading...</div>

    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
        <button @click="removeUser(user.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

Component sekarang bersih dan mudah dibaca.

---

Kapan Gunakan Composable?

Gunakan composable jika:

• Logic dipakai lebih dari satu komponen
• Ada state + side effect
• Ingin membuat domain logic terpisah

Jangan gunakan composable hanya untuk 1–2 baris kecil yang tidak reusable.

---

Pola Folder untuk Project Nyata

src/
├─ components/
├─ composables/
├─ services/
├─ stores/
├─ pages/
└─ utils/

Struktur ini membuat project tetap scalable saat fitur bertambah.

---

Error Umum Composition API

1️⃣ Semua Logic Ditaruh di Page

Solusi: pindahkan ke composable.

2️⃣ Store Dipakai untuk Semua Hal

Solusi: gunakan store hanya untuk global state.

3️⃣ Tidak Pisahkan API dan Logic

Solusi: buat service layer.

---

Checklist Production Ready

• Composables terpisah per domain
• Service layer untuk API
• Component hanya fokus UI
• Store hanya global state
• Folder terstruktur rapi

---

Kesimpulan

Composition API bukan sekadar syntax baru di Vue 3. Ini adalah cara berpikir baru dalam menyusun aplikasi.

Kalau kamu ingin project Vue 3 yang scalable dan siap dikerjakan tim, gunakan pola:

• UI di component
• Logic di composable
• API di service
• State global di store

Dengan pola ini, project kamu akan lebih bersih, mudah dikembangkan, dan siap untuk production.

---

FAQ

Apakah Composition API lebih baik dari Options API?

Ya, untuk project besar karena lebih modular dan reusable.

Apakah semua logic harus dipindah ke composable?

Tidak. Hanya logic yang reusable atau kompleks.

Kapan harus pakai store?

Jika state perlu digunakan lintas halaman atau global.