Tutorial Inertia.js Laravel & Vue #1 : Instalasi & Konfigurasi Inertia

Muhammad Amirul Ihsan25 November 20210 Comment22.8k

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.