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