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


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial Inertia.js Authentication #3 : Installasi dan Konfigurasi Inertia.js "client-side"

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/inertia@0.11.0
npm install @inertiajs/inertia-vue3@0.6.0
npm install vue@3.2.29

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/inertia": "^0.11.0",
     "@inertiajs/inertia-vue3": "^0.6.0",
     "vue": "^3.2.29"
}

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 :

require('./bootstrap');

import { createApp, h } from 'vue';
import { App, plugin } from '@inertiajs/inertia-vue3';

const el = document.getElementById('app')

createApp({
  render: () => h(App, {
    initialPage: JSON.parse(el.dataset.page),
    resolveComponent: name => require(`./Pages/${name}`).default,
  })
})
.use(plugin)
.mount(el);

Sekarang kita harus menambahkan sebuah folder baru agar proses compiling tidak terjadi error, silahkan buat folder baru dengan nama Pagees di dalam folder resources/js.

Langkah 3 - Konfigurasi Webpack (Laravel MIX)

Sekarang, kita akan melakukan konfigurasi untuk Laravel MIX, dimana Laravel MIX 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 webpack.mix.js, kemudian ubah kode-nya menjadi seperti berikut ini :

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .vue({ version: 3 });

Langkah 4 - Menjalankan Proses Compiling

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

npm run dev

Jika keluar pesan seperti berikut ini :

Finished. Please run Mix again.

Maka, silahkan jalankan perintah npm run dev lagi.

Di atas bisa kita lihat, kita mendapatkan 2 file baru dari hasil compile dengan nama app.js dan app.css yang berada di dalam folder public/js dan public/css.

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



Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami