Event Bus di Nuxt 3 Dengan Menggunakan Hooks Dari Nuxt

Ketika kita membangun web app 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.

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),
	};
}Code language: JavaScript (javascript)

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 emiter = useEmitter()
const search = ref('')

function submitSearch() {
	emitter('search', search.value)
}Code language: JavaScript (javascript)

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
	})
})Code language: JavaScript (javascript)

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