Home Web Laravel Gampang Banget! Integrasi Laravel dan Vue.js Pakai Inertia.js

Gampang Banget! Integrasi Laravel dan Vue.js Pakai Inertia.js

Iqbal Muhakim
-
0
Gampang Banget! Integrasi Laravel dan Vue.js Pakai Inertia.js

Apa itu Inertia.js?

Inertia adalah pendekatan baru untuk membangun aplikasi web monolit modern yang digerakkan oleh server. Dengan Inertia, kita bisa membuat aplikasi satu halaman yang dirender sepenuhnya dari sisi klien tanpa perlu menghadapi kerumitan SPA modern. Inertia memanfaatkan pola sisi server yang sudah ada, sehingga kita tetap dapat membuat Controller dan View seperti biasa. Inertia sangat cocok digunakan dengan Laravel, namun Inertia juga bekerja baik dengan kerangka kerja backend lainnya.

Inertia bukanlah sebuah framework, melainkan alat yang menghubungkan framework sisi server dan klien. Ia bekerja dengan adaptor untuk menghubungkan keduanya. Saat ini, tersedia tiga adaptor resmi untuk sisi klien (React, Vue, dan Svelte) dan tiga untuk sisi server (Laravel, Rails, dan Phoenix).

Kenapa Harus Inertia.js?

  1. Sederhana: Inertia.js memungkinkan kita untuk menghindari kerumitan membuat API terpisah. Dengan Inertia, backend dan frontend terhubung langsung melalui request dan response, memanfaatkan Laravel untuk rendering dan Vue.js untuk interaktivitas.
  2. Cepat: Pengalaman SPA yang mulus bisa didapatkan tanpa perlu mengelola state management yang kompleks di client-side, karena Inertia.js membuat interaksi frontend lebih cepat dan lebih responsif.
  3. Terintegrasi: Memudahkan pengembangan dengan Laravel untuk rendering halaman dan Vue.js untuk elemen interaktif, memungkinkan integrasi yang mulus antara backend dan frontend.

Langkah-Langkah Integrasi Laravel dan Vue.js dengan Inertia.js

Sebelum mengintegrasikan inertia ke project laravel, tentu kita harus sudah ada project laravelnya terlebih dahulu. Mengintegrasikan inertia dilakukan untuk server-side (laravel) dan client-side (vue/react/svelte). Pada artikel ini kita menggunakan Laravel 10 dan tentunya menggunakan Vue untuk client-side

membuat project laravel :

composer create-project laravel/laravel:^10.0 linertia

# Server-Side Setup

1. Install dependencies, instal adaptor sisi server Inertia menggunakan manajer paket Composer.

composer require inertiajs/inertia-laravel

2. Siapkan template root yang akan dimuat pertama kali ketika mengakses website. Ini akan digunakan untuk memuat aset situs seperti CSS dan JavaScript, dan juga akan berisi root untuk mem-boot aplikasi JavaScript.

buat file app.blade.php di dalam resources/views

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

3. Menyiapkan middleware Inersia. Kita dapat melakukannya dengan menerbitkan middleware HandleInertiaRequests ke aplikasi menggunakan perintah Artisan berikut :

php artisan inertia:middleware

4. Konfigurasikan Middleware di app/Http/Kernel.php Tambahkan middleware untuk Inertia di grup middleware web:

protected $middlewareGroups = [
    'web' => [
        ....
        \App\Http\Middleware\HandleInertiaRequests::class,
    ],
];

# Client-Side Setup

1. Instal adaptor sisi klien Inersia, sesuaikan dengan library atau framework yang ingin kita gunakan (react, vue, svelte)

npm install @inertiajs/vue3

2. Inisialisasi aplikasi Inersia, perbarui file JavaScript utama resources/js/app.js untuk mem-boot aplikasi Inersia. 

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

3. Install Vite Vue-Plugin, karena secara default laravel menggunakan vite, kita perlu menginstall @vitejs/plugin-vue agar Vue Js dapat terintegrasi dengan baik

npm install @vitejs/plugin-vue

4. Tambahkan VuePlugin pada konfigurasi vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue()
    ],
});

# Let’s try it

1. Buat Komponen Vue.js di resources/js/Pages/Home.vue. Kita akan menampilkan message yang mana komponen akan dirender menggunakan Inertia:

<script setup>
    defineProps({ message: String })
</script>

<template>
    <div>
        <h1>{{ message }}</h1>
    </div>
</template>

2. Buat Web Route untuk merender Home.vue dan mengirimkan sebuah props message

use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Home', [
        'message' => 'Hello Linertia'
    ]);
});

3. Jalankan php artisan serve dan npm run dev pada terminal

php artisan serve
npm run dev

Kesimpulan

Dengan Inertia.js, mengintegrasikan Laravel dan Vue.js menjadi sangat mudah dan tidak memerlukan konfigurasi API yang rumit. Inertia.js menghubungkan backend Laravel dan frontend Vue.js secara langsung, memberikan pengalaman SPA yang mulus tanpa harus membuat API terpisah. Ini sangat cocok untuk pengembang yang ingin membangun aplikasi web modern dengan cara yang lebih sederhana dan efisien. Jadi, jika kamu ingin mencoba solusi yang cepat dan terintegrasi untuk aplikasi Laravel dan Vue.js, Inertia.js adalah pilihan yang tepat!

© Newspaper WordPress Theme by TagDiv