Menginstal paket Inertia.js: Anda dapat menginstal paket Inertia.js melalui npm atau yarn. Buka terminal Anda dan jalankan salah satu perintah berikut:
npm install @inertiajs/inertia
atau
yarn add @inertiajs/inertia
Menginstal Adapter Inertia.js untuk Laravel: Jika Anda menggunakan Laravel di sisi belakang, Anda perlu menginstal paket adapter Inertia.js untuk Laravel. Jalankan perintah berikut di terminal Anda:
composer require inertiajs/inertia-laravel
- Menyiapkan Inertia.js di frontend Anda: Inertia.js bekerja dengan Vue.js, jadi Anda perlu memiliki Vue.js yang disiapkan di proyek Anda. Anda dapat mengatur Vue.js secara manual atau menggunakan dukungan bawaan Laravel untuk Vue.js.
Membuat komponen Inertia.js pertama Anda: Dalam Inertia.js, tampilan Anda direpresentasikan sebagai komponen. Buat komponen Vue pertama Anda dalam proyek Laravel Anda. Sebagai contoh, buat file bernama Welcome.vue di direktori resources/js/components Anda.
<template> <div>
<h1>Selamat datang di aplikasi Inertia.js saya/h1>
<p>Ini adalah contoh dasar dari komponen Inertia.js.</p>
</div>
</template>
<script>
export default {
// Logika komponen ditempatkan di sini
}
</script>
Menyiapkan rute Anda: Inertia.js bergantung pada rute Laravel Anda untuk melayani komponen Vue Anda. Tentukan rute Anda di file web.php atau api.php. Sebagai contoh:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\WelcomeController;
Route::get('/', [WelcomeController::class, 'index']);
Membuat controller Anda: Buat sebuah controller untuk menangani logika rendering komponen Inertia.js Anda. Sebagai contoh:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Inertia\Inertia;
class WelcomeController extends Controller
{
public function index()
{
return Inertia::render('Welcome');
}
}
Merender komponen Anda: Terakhir, render komponen Anda dalam template Blade Anda. Sebagai contoh:
<!DOCTYPE html> <html> <head> <!-- Isi kepala Anda di sini --> </head> <body> @inertia <!-- Isi HTML lainnya di sini --> </body> </html>
Itu dia! Anda telah menyiapkan Inertia.js dalam proyek Laravel Anda dan membuat komponen Inertia.js pertama Anda. Anda sekarang dapat melanjutkan membangun aplikasi Anda menggunakan Inertia.js untuk membuat antarmuka pengguna yang dinamis dan interaktif.
