• Apa Itu Composable?
• Kapan Gunakan Custom Composable?
• Membuat Composable Sederhana
• Menggunakan Composable di Komponen
• Composable dengan Computed & Watch
• Composable untuk Fetch API
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Provide & Inject, bagaimana cara berbagi data antar komponen tanpa props drilling.

Pada artikel kali ini, kita akan membahas tentang Custom Composable, yaitu cara membuat fungsi reusable untuk mengelola logic di Vue. Konsep ini mirip dengan Custom Hooks di React.

Apa Itu Composable?

Composable adalah fungsi JavaScript yang:

• Biasanya diawali dengan kata use (misalnya useCounter, useFetch).
• Berisi logic reaktif yang menggunakan API dari Vue (ref, reactive, computed, watch, dll).
• Bisa digunakan di berbagai komponen agar tidak menulis ulang logic yang sama.

Kapan Gunakan Custom Composable?

Gunakan custom composable ketika:

• Logic dipakai berulang di beberapa komponen.
• Perlu memisahkan concerns (misalnya: useAuth, useForm, useTheme).
• Ingin membuat kode lebih bersih dan terorganisir.

Membuat Composable Sederhana

Kita akan membuat composable useCounter untuk mengelola state counter.

Silahkan buat file baru dengan nama useCounter di dalam folder src/composables.

import { ref } from "vue"

export function useCounter() {
  const count = ref(0)

  const increment = () => {
    count.value++
  }

  const decrement = () => {
    count.value--
  }

  return {
    count,
    increment,
    decrement
  }
}

Composable ini mengembalikan state (count) dan function (increment, decrement).

Menggunakan Composable di Komponen

<script setup>
import { useCounter } from "../composables/useCounter"

const { count, increment, decrement } = useCounter()
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Tambah</button>
    <button @click="decrement">Kurang</button>
  </div>
</template>

Sekarang kita bisa menggunakan useCounter di banyak komponen tanpa duplikasi kode.

Composable dengan Computed & Watch

Composable bisa lebih kompleks dengan computed dan watch. Contohnya seperti berikut ini:

import { ref, computed, watch } from "vue"

export function useFullName() {
  const firstName = ref("")
  const lastName = ref("")

  const fullName = computed(() => {
    return `${firstName.value} ${lastName.value}`
  })

  watch(fullName, (newVal) => {
    console.log("Nama lengkap berubah:", newVal)
  })

  return {
    firstName,
    lastName,
    fullName
  }
}

Composable untuk Fetch API

Composable juga cocok untuk menangani data fetching.

useFetch.js
import { ref, onMounted } from "vue"

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  onMounted(async () => {
    try {
      const res = await fetch(url)
      data.value = await res.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  })

  return {
    data,
    error,
    loading
  }
}

Penggunaan:

<script setup>
import { useFetch } from "../composables/useFetch"

const { data, error, loading } = useFetch("https://jsonplaceholder.typicode.com/posts")
</script>

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <ul v-else>
    <li v-for="post in data" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

Kesimpulan

Pada artikel ini, kita sudah belajar tentang Custom Composable di Vue:

• Apa itu composable dan fungsinya.
• Membuat composable sederhana (useCounter).
• Membuat composable dengan computed dan watch.
• Membuat composable untuk fetch API.

Dengan composable, kita bisa menulis ulang logic reaktif sekali, lalu memakainya di banyak komponen.

Di artikel berikutnya, kita akan membahas tentang Styling di Vue, mulai dari inline style, scoped style, hingga integrasi dengan Tailwind CSS.

Terima kasih