Tutorial Laravel & Inertia.js #4 : Installasi dan Konfigurasi Inertia.js "client-side"

• Langkah 1 - Installasi Dependensi
• Langkah 2 - Inisialisasi App
• Langkah 3 - Konfigurasi Vite
• Langkah 4 - Melakukan Proses Compiling Assets

Halo teman-teman semuanya, di artikel sebelumnya kita sudah belajar bagaimana cara melakukan installasi dan konfigurasi Inertia.js disisi "server-side", maka sekarang kita akan lanjutkan untuk melakukan installasi dan konfigurasi disisi "client-side".

Nantinya kita akan menggunakan Vue.js 3 sebagai frontend-nya dan menerapkan konsep Composition API di dalam Vue.js 3 untuk penulisan kode-nya.

Langkah 1 - Installasi Dependensi

Sekarang kita bisa melakukan installasi "client-side" adapter menggunakan NPM atau YARN dan disini kita akan coba menggunakan NPM untuk proses download package-nya.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.

npm install

npm install @inertiajs/vue3@2.2.19

npm install vue@3.5.25

npm install @vitejs/plugin-vue@6.0.2

Silahkan tunggu proses installasi sampai selesai. Dan untuk memastikan apakah sudah berhasil terinstall, kita bisa buka file package.json dan lihat di bagian dependencies, kurang lebih seperti berikut ini :

"dependencies": {
	"@inertiajs/vue3": "^2.2.19",
	"@vitejs/plugin-vue": "^6.0.2",
	"vue": "^3.5.25"
}

Langkah 2 - Inisialisasi App

Setelah berhasil melakukan installasi, sekarang kita lanjutkan untuk melakukan konfigurasi, sekarang silahkan buka file resources/js/app.js kemudian ubah semua kode-nya menjadi seperti berikut ini :

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)
    },
})

Setalah berhasil melakukan inisialisasi, sekarang kita harus menambahkan sebuah folder baru agar proses compiling tidak terjadi error, silahkan buat folder baru dengan nama Pages di dalam folder resources/js.

Langkah 3 - Konfigurasi Vite

Sekarang, kita akan melakukan konfigurasi untuk Vite, dimana Vite inilah yang akan melakukan proses compiling assets yang ada di dalam folder resources/js dan resources/css dan hasil compile-nya akan ditaruh di dalam folder public/js dan public/css.

Silahkan buka file vite.config.js, kemudian ubah kode-nya menjadi seperti berikut ini :

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
        tailwindcss(),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        })
    ],
});

Langkah 4 - Melakukan Proses Compiling Assets

Silahkan buka file .env, kemudian cari kode berikut ini.

APP_URL=http://localhost

Dan ubah menjadi seperti berikut ini.

APP_URL=http://localhost:8000

Sekarang, kita akan melakukan proses compiling assets-nya. Silahkan jalankan perintah berikut ini di dalam terminal/CMD :

npm run dev

INFORMASI PENTING ! : ketika melakukan development, harap menjalankan perintah npm run dev dan terminal/CMD-nya tidak boleh tutup.

---

Karena Vite akan otomatis melakukan compile ketika ada perubahan dan melakukan hot reload halaman yang diubah.

Sampai disini pembahasan bagaimana cara insstallasi dan konfigurasi Inertia.js dari sisi "client-side", di artikel selanjutnya kita semua akan belajar bagaimana cara menampilkan data dari database menggunakan Inertia.js.

Terima Kasih

• Membangun Aplikasi Kasir (Point of Sales) dengan Laravel, Inertia.js dan Vue.js
• Membangun Aplikasi Ujian Online (CBT) Dengan Laravel, Inertia.js & Vue.js
• Membangun Website Toko Online Dengan Laravel, Inertia.js & React.js