Tutorial Inertia.js Authentication #3 : Installasi dan Konfigurasi Inertia.js "client-side"

• Langakah 1 - Installasi Inertia.js "client-side"
• Langkah 2 - Inisialisasi App
• Langkah 3 - Konfigurasi Vite
• Langkah 4 - Menjalankan Proses Compiling

Halo teman-teman semuanya, di artikel sebelumnya kita telah membahas bagaiamana installasi dan konfigurasi Inertia.js "server-side", sekarang kita akan lanjutkan untuk melakukan installasi dan konfigurasi Inertia.js "client-side".

Untuk "client-side" atau teknologi frontend yang akan kita gunakan yaitu Vue.js 3 dengan Composition API. Teman-teman juga bisa menggunakan teknologi lain, seperti React.js ataupun Svelte.

Langakah 1 - Installasi Inertia.js "client-side"

Untuk melakukan installasi Inertia.js "client-side" kita harus mempunyai Node.js yang sudah terinstall di dalam komputer. Jika belum, silahkan lakukan installasi Node.js terlebih dahulu.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Laravelnya.

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

Kita lanjutkan untuk melakukan inisialisasi app di dalam frontend. 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)
    },
})

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 - Menjalankan Proses Compiling

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

Sampai disini pembahasan bagaimana cara insstallasi dan konfigurasi Inertia.js dari sisi "client-side". Di artikel selanjutnya kita akan belajat bagaimana cara membuat proses register.

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