Berkenalan dengan Laravel Livewire

Pada tutorial kali ini kita belajar laravel livewire. Di website Livewire sendiri sudah dijelaskan bahwa livewire ini merupakan full-stack framework untuk laravel yang membuat antarmuka dinamis secara mudah, tanpa meninggalkan laravel.

Livewire akan membuat file Class PHP dan view kketika kita akan membuat component livewire. Pada file Class PHP ini cara kerjanya mirip dengan controller di Laravel sedangkan untuk file view yaitu untuk menampilkan data di Livewire. Jadi cara ini sama persis dengan Laravel dimana biasanya kita akan menampilkan data dari controller ke view.

Bagaimana cara kerja Livewire ?

Livewire akan merender komponen awal dengan halaman (seperti blade). dengan cara tersebut sangatlah SEO friendly.
Ketika terjadi interaksi, Livewire akan membuat permintaan AJAX ke server dengan data yang diperbaruhi.
Server merender ulang komponen dan merespons dengan HTML baru.
Livewire kemudian memutasi DOM sesuai dengan hal-hal yang berubah.

Install Laravel Livewire

Dengan Laravel Jetstream

Jika kalian menggunakan laravel jetstream, kalian bisa langsung menginstall laravel livewire dan juga dengan beberapa fitur yang tersedia di laravel jetstream seperti login. register, dll.

Ketika kalian menggunakan laravel jetstream, kalian bisa langsung membuat komponen livewirenya. karena kalian tidak perlu melakukan konfigurasi apapun lagi.

Secara Manual

Jika kalian tidak ingin menggunakan laravel jetstream. kalian bisa install terlebih dahulu laravel.

Nahh ketika kalian berhasil install project laravel. Kemudian silahkan kalian masuk di file project yang sudah kalian buat. Setelah kalian berada di file project laravel silahkan jalankan perintah berikut

composer require livewire/livewire

Dengan perintah tersebut akan menginstal versi terbaru dari livewire.

Kemudian kalian juga perlu menyisipkan asert Livewire ke dalam template utama di aplikasi kalian.

<html>

<head>

    ...

    @livewireStyles

</head>

<body>

    ...

    @livewireScripts

</body>

</html>

kalian juga bisa menggunakan tag sintaks alternatif

<livewire:styles />

...

<livewire:scripts />

Nahh sekarang kalian sudah bisa menggunakan Livewire

Menerbitkan File Konfigurasi

Livewire bertujuan untuk “zero configuration” secara out of the box. Akan tetapi mungkin sebagian orang juga membutuhkan untuk pilihan konfigurasi.

kita bisa menerbitkan file konfigurasi Livewire dengan menggunakan perintah berikut ini.

php artisan livewire:publish --config

menerbitkan Assets Frontend

Jika kalian lebih suka aset JavaScript tersaji memalu web server tanpa melalui laravel, kalian bisa menggunakan perintah berikut ini.

php artisan livewire:publish --assets

Sekian untuk tutorial kali ini. Jika kalian masih bingung dengan Laravel Livewire kalian bisa komentar dibawah ini.