Assalamualaikum Warohmatulloh Wabarokatuh, setelah kenalan dengan Inertia.js. Sekarang mari lanjutkan untuk mempelajari sedikit lebih jauh dengan mencoba membuat aplikasi sederhana dengan Inertia.js. Stack yang akan kita gunakan adalah Laravel & Vue 3. Kita awali dengan Instalasi & Konfigurasi Inertia.
Menginstal Laravel
Pertama, untuk membuat sebuah proyek Inertia.js dengan Laravel sebagai aplikasi server-sidenya, tentu kita membutuhkan Laravel. Lakukan instalasai Laravel dengan cara biasanya.
laravel new inertia
Setelah proses selesai, kita bisa masuk ke folder proyek Laravel dengan perintah
cd inertia
Sesudah masuk ke dalam proyeknya, silakan buka proyeknya dengan text editor andalan kalian, misalnya dengan Visual Studio Code, bisa gunakan perintah ini.
code .
Langkah tersebut akan membuka VS Code dengan proyek inertia
yang baru kita instal, dengan catatan posisi kita ada dalam proyeknya.
Kemudian buat database & sesuaikan konfigurasi pada file .env
untuk databasenya, sesuaikan dengan yang kawan kawan punya ya.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=inertia
DB_USERNAME=root
DB_PASSWORD=
Konfigurasi Inertia.js Server Side
Setelah selesai melakukan konfigurasi pada proyek Laravel, selanjutnya kita instal dependency Inertia.js yang berupa sebuah adapter untuk Laravel.
composer require inertiajs/inertia-laravel
Lalu kita buat sebuah tampilan utama yang akan dimuat ketika halaman pertama dikunjungi. Secara default Inertia akan menggunakan file app.blade.php
, pada template ini seharusnya menyertakan aset-aset yang dibutuhkan & directive @inertia
yang fungsinya mirip dengan @yield()
pada template blade biasanya.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
<script src="{{ mix('/js/app.js') }}" defer></script>
</head>
<body>
@inertia
</body>
</html>
Berikutnya, kita harus mempublis middleware HandleInertiaRequests
ke aplikasi kita, yang bisa kita lakukan dengan menjalankan perintah artisan.
php artisan inertia:middleware
Setelah berhasil terpublish, daftarkan HandleInertiaRequests
ke dalam App\Http\Kernel
sebagai item terakhir pada grup middleware web
.
'web' => [
// ...
\App\Http\Middleware\HandleInertiaRequests::class,
],
Membuat response dengan Inertia tidak beda dengan membuatnya dengan file blade biasa, yang berbeda hanya pada method yang digunakan.
use App\Models\Todo;
use Inertia\Inertia;
class EventsController extends Controller
{
public function index()
{
return Inertia::render('Todo/Index', [
'todos' => Todo::get(),
]);
}
}
Konfigurasi Inertia Client-Side
Beres dengan urusan Server-Side, lanjut ke bagian Client-Side. Kita bisa instal Inertia client adapter dengan perintah berikut ini, pilih salah satu aja ya sesuai yang kawan kawan pakai.
npm install @inertiajs/inertia @inertiajs/inertia-vue3
yarn add @inertiajs/inertia @inertiajs/inertia-vue3
Kemudian perbarui file Javascript utama
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})
Callback resolve
memberitahu Inertia bagaimana cara memuat sebuah komponen halaman. Dia menerima sebuah nama halaman berupa string dan seharusnya mengembalikan sebuah modul komponen halaman.
Secara default Inertia menganggap kamu memiliki elemen utama dengan id app
.
Sekian untuk instalasi & konfigurasi Inertia dengan menggunakan Laravel & Vue 3. Tertarik mempelajari Inertia? Yuk lanjut.
Wassalamualaikum Warohmatulloh Wabarokatuh.
Tinggalkan Balasan