Cara Membuat Komponen Reusable di Vue.js: Desain UI yang Fleksibel

Dalam pengembangan aplikasi dengan Vue.js, menggunakan komponen reusable adalah cara terbaik untuk meningkatkan efisiensi dan menjaga konsistensi UI. Dengan pendekatan ini, kita bisa menghindari duplikasi kode dan membuat aplikasi lebih mudah dipelihara. Artikel ini akan membahas cara membuat komponen reusable di Vue 3 menggunakan Composition API.

📌 Baca juga: Tren Web3 di 2025: Apa yang Akan Terjadi?

---

1. Apa Itu Komponen Reusable?

Komponen reusable adalah komponen Vue yang dapat digunakan kembali di berbagai bagian aplikasi tanpa perlu menulis ulang kode yang sama. Dengan menggunakan props, emits, dan slots, kita dapat membuat komponen yang fleksibel dan mudah dikustomisasi.

2. Membuat Komponen Reusable

Mari kita buat contoh komponen tombol (BaseButton.vue) yang dapat digunakan kembali dengan berbagai jenis tampilan.

a. Struktur Dasar Komponen

Buat file BaseButton.vue di dalam folder components dengan kode berikut:

<template>
  <button :class="buttonClass" @click="onClick">
    <slot></slot>
  </button>
</template>

<script setup>
import { computed, defineProps, defineEmits } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'secondary', 'danger'].includes(value)
  }
})

const emit = defineEmits(['click'])

const buttonClass = computed(() => ({
  'bg-blue-500 text-white px-4 py-2 rounded': props.type === 'primary',
  'bg-gray-500 text-white px-4 py-2 rounded': props.type === 'secondary',
  'bg-red-500 text-white px-4 py-2 rounded': props.type === 'danger',
}))

const onClick = () => {
  emit('click')
}
</script>

<style scoped>
button {
  transition: background-color 0.3s ease;
}
button:hover {
  opacity: 0.8;
}
</style>

3. Menggunakan Komponen di Aplikasi

Setelah membuat BaseButton.vue, kita bisa menggunakannya di berbagai halaman atau komponen lainnya.

<template>
  <BaseButton type="primary" @click="handleClick">Klik Saya</BaseButton>
</template>

<script setup>
import BaseButton from '@/components/BaseButton.vue'

const handleClick = () => {
  alert('Tombol diklik!')
}
</script>

4. Manfaat Komponen Reusable

• Efisiensi: Mengurangi duplikasi kode.

• Konsistensi: Tampilan UI seragam di seluruh aplikasi.

• Kemudahan Pemeliharaan: Perubahan cukup dilakukan di satu tempat.

Kesimpulan

Menggunakan komponen reusable di Vue.js adalah praktik terbaik untuk meningkatkan produktivitas dan kualitas kode. Dengan pendekatan ini, kita dapat membangun aplikasi yang lebih scalable dan mudah dikelola.

📌 Baca juga: Tren Web3 di 2025: Apa yang Akan Terjadi?