Ketika kita membangun web dengan menggunakan Nuxt, kadang kala kita memerlukan event-listener antar komponen yang terletak berjauhan. Untuk mengatasi hal tersebut dapat menggunakan pattern Event Bus agar kita dapat melakukan event-listener dimanapun yang kita inginkan sesuai dengan kebutuhan.

Important

Pembaruan Januari 2026: Nuxt telah resmi merilis Nuxt 4 pada pertengahan 2025 dengan berbagai peningkatan performa dan struktur direktori baru. Meskipun metode menggunakan lifecycle hooks internal di bawah ini masih bisa berjalan, komunitas Nuxt kini lebih menyarankan penggunaan Pinia untuk manajemen state atau library mitt jika Anda benar-benar membutuhkan Event Bus fungsional.

Dalam artikel kali ini, saya mendapatkan contoh bagaimana cara melakukan event-listener dengan menggunakan fitur bawaan Nuxt, yaitu ‘Hooks’. Contoh ini saya dapatkan dari salah satu gist github. Berikut ini contoh penggunaan ‘Hooks’ sebagai Event Bus.

// composables/useEmitter.ts
export default function () {
	const hooks = useNuxtApp().hooks;

	return {
		emit: (name: string, value: unknown) => hooks.callHook(name as any, value),
		on: (name: string, payload: (payload: unknown) => void) =>
			hooks.hook(name as any, payload),
	};
}

Pada potongan kode di atas, saya menulisnya dalam bentuk TypeScript. Pertama-tama kita ambil objek hooks dari aplikasi nuxt yang berjalan dengan menggunakan composable ‘useNuxtApp’. Kemudian kita kembalikan dua properti yang akan kita gunakan untuk proses event-listener. Tiap-tiap properti di sini saya jadikan fungsi agar dapat saya ubah tipe datanya sehingga sesuai dengan tipe data yang diperbolehkan oleh ‘Hooks’.

Cara penggunaan Event Bus dengan metode di atas adalah sebagai berikut:

Penggunaan Pada Komponen

Dimisalkan kita ingin melakukan ‘emit’ event pada suatu komponen dengan nama event ‘search’. Dapat kita lakukan dengan cara sebagai berikut:

const emitter = useEmitter()
const search = ref('')

function submitSearch() {
	emitter.emit('search', search.value)
}

Penggunaan Pada Komponen Lain

Kemudian pada komponen lain tempat kita ingin menangkap event yang dipancarkan pada komponen di atas dapat kita lakukan sebagai berikut:

const emitter = useEmitter()

onMounted(() => {
	emitter.on('search', (payload) => {
		// implementasi kode yang ingin dilakukan ketika event 'search' diterima
	})
})

Begitulah cara bagaimana melakukan event-listener dengan bantuan ‘Hooks’ dari Nuxt.

Pembaruan 2026: Nuxt 4 & Komunikasi Antar Komponen

Seiring dengan rilisnya Nuxt 4, ada beberapa poin penting yang perlu Anda perhatikan dalam mengelola komunikasi antar komponen:

1. Pinia: Solusi Utama State Management

Untuk sebagian besar kasus (seperti mengirim data pencarian atau status login), menggunakan Pinia adalah pilihan terbaik. Dengan Pinia, data Anda bersifat reaktif dan sinkron di seluruh aplikasi tanpa perlu melakukan emit manual.

2. Pattern Event Bus dengan mitt

Jika Anda benar-benar membutuhkan sistem event emitter (misalnya untuk mentrigger animasi atau integrasi third-party), library mitt sangat disarankan di Nuxt 4 karena sangat ringan.

Anda bisa menggunakannya melalui plugin:

// plugins/mitt.ts
import mitt from 'mitt'

export default defineNuxtPlugin(() => {
  const emitter = mitt()
  return {
    provide: {
      bus: emitter
    }
  }
})

3. Pembersihan Listener

Satu hal yang sering terlupakan baik di Nuxt 3 maupun Nuxt 4 adalah memory leak. Pastikan Anda selalu mematikan listener saat komponen tidak lagi digunakan:

const emitter = useEmitter()

onUnmounted(() => {
  // Matikan listener di sini jika library mendukungnya
})

Begitulah cara bagaimana melakukan event-listener dengan bantuan ‘Hooks’ dari Nuxt. Terima kasih. 😊