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


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

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

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.9.0",
   "@inertiajs/inertia-vue3": "^0.4.0",
   "vue": "^3.0.11"
}

CATATAN ! : untuk versinya mungkin akan berbeda-beda

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 :

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)

Setalah berhasil melakukan inisialisasi, 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)

Terakhir, kita akan melakukan sedikit konfigurasi untuk compiling assets CSS dan JavaScript menggunakan Laravel MIX, silahkan buka file webpack.mix.js, kemudian ubah koe-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 - Melakukan Proses Compiling Assets

Sekarang kita akan melakukan proses compiling untuk assets CSS dan JavaScript, yang mana isinya adalah kode-kode Vue.js yang akan diubah menjadi kode JavaScript.

Jika kita perhatikan, di dalam folder public kita belum memiliki folder yang bernama assets yang mana nantinya akan berisi file-file CSS dan JavaScript dari hasil compile. Setelah kita menjalankan compiling, maka folder tersebut akan otomatis di generate.

Silahkan jalankan perintah berikut ini untuk melakukan proses compiling menggunakan Laravel MIX.

npm run dev

Silahkan tunggu proses compiling-nya sampai selesai, disini akan membutuhkan waktu yang lebih lama dan jika sudah berhasil, maka kita akan menemukan folder baru dengan nama assets yang berada di dalam folder public.

Jika keluar pesan seperti berikut ini :

Finished. Please run Mix again.

Silahkan jalankan lagi perintah npm run dev.

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



Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at 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

KOMENTAR