Instal dan Konfigurasi Client Side Inertiajs

Sekarang Anda perlu menyiapkan kerangka kerja di bagian sisi klien dengan melakukan beberapa instalasi. Anda akan menggunakan kerangka kerja Vue.js v3.x, tentu sebagian dari Anda yang masih menggunakan v2.x. Tidak perlu khawatir karena pendekatan dan perbedaan tidak terlalu jauh.

Daftar isi:

Langkah 1 - Instal InertiaJS - Client Side

Disini Anda harus menginstal Inertia dan juga Inertia Vue3, tentu saja saya tidak lupa juga untuk menambahkan indikator proses. Indikator tersebut akan tampil jika Anda beralih dari halaman ke halaman lainnya. Silakan jalankan skrip di bawah ini untuk memulai menginstal.

yarn add @inertiajs/inertia @inertiajs/inertia-vue3 @inertiajs/progress

Catatan: Jika Anda tidak menggunakan Yarn maka Anda bisa menggunakan NPM dengan cara npm install ....

Langkah 2 - Instalasi Aplikasi Klien

Setelah proses instalasi langkah sebelumnya selesai, sekarang Anda akan melakukan instalasi pada sisi klien. Salin dan tempelkan pada berkas app.js pada direktori resources/js.

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { InertiaProgress } from '@inertiajs/progress'

InertiaProgress.init()

createInertiaApp({
    resolve: (name) => import(`./Pages/${name}`),
    setup({ el, app, props, plugin }) {
        createApp({ render: () => h(app, props) })
            .mixin({ methods: { route } })
            .use(plugin)
            .mount(el)
    }
})

Anda perlu menambahkan direktori baru pada direktori resources/js dengan nama Pages dan sedikit penjelasan lihat contoh kode di bawah ini.

.mixin({ methods: { route } })

Perlu Anda tahu yang sebelumnya sudah instal Ziggy maka Anda perlu membuat fungsi baru dengan nama route seperti diatas. Fungsi route bisa digunakan secara global karena menerapkannya pada root App. Mungkin disini Anda akan bertanya Kenapa fungsi tersebut tidak ada skrip tambahan gitu? Agar lebih jelasnya karena Ziggy menggunakan window.route agar bisa di akses secara global pada skrip JavaScript, maka Anda harus melakukan konfigurasi lebih lanjut pada skrip Vue-Nya agar bisa digunakan pada skrip Vue.

Langkah 3 - Instal dan Konfigurasi Vue 3

Pada dokumentasi Inertia tidak disebutkan untuk melakukan instalasi Vue 3, karena mereka anggap orang yang menggunakan InertiaJS sudah paham. Maka dari itu sebaiknya Anda melakukan instalasi Vue 3 dengan cara di bawah ini.

yarn add vue@next

Perlu diketahui kalau Laravel Mix v6.x memiliki dukungan Vue yang harus diatur baik versi v2.x atau v3.x. Silakan buka berkas webpack.mix.js kemudian sesuaikan skripnya di bawah ini.

mix.js('resources/js/app.js', 'public/js')
    .vue() // ini tambahkan yaaa!
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Catatan: Anda juga bisa mengatur versi Vue yang digunakan misalnya vue({ version: 3 }), tetapi jangan sampai Anda menginstal Vue v2.x tetapi menyetelnya dengan v3.x.

Langkah 4 - Instal dan Konfigurasi Bulma

Tutorial CRUD ini saya menggunakan kerangka kerja CSS Bulma, karena Bulma bagi saya lebih mudah di pahami dari dokumentasinya hingga susunan penggunakan kerangka kerja tersebut. Sekarang silakan instal Bulma dengan menjalankan perintah di bawah ini pada terminal Anda.

yarn add bulma

Setelah selesai melakukan instalasi jangan lupa salin dan tempelkan skrip di bawah ini pada berkas app.css pada direktori resources/css.

@import "bulma/css/bulma.css";

Langkah 5 - Buat Tata Letak

Sekarang sudah sampai pada langkah kelima disini Anda akan membuat tata letak atau layout. Buatlah nama direktori baru dengan nama Components pada direktori resources/js, kemudian langsung saja salin dan tempelkan skrip di bawah ini.

<template>
    <nav class="navbar has-shadow">
        <div class="container">
            <div class="navbar-brand">
                <inertia-link
                    :href="route('users.index')"
                    class="navbar-item"
                >
                    Home
                </inertia-link>

                <a
                    @click="isNavbar = !isNavbar"
                    :class="['navbar-burger', {
                        'is-active': isNavbar
                    }]"
                >
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </a>
            </div>
            <div
                :class="['navbar-menu', {
                    'is-active': isNavbar
                }]"
            >
                <div class="navbar-end">
                    <inertia-link
                        :href="route('users.index')"
                        class="navbar-item is-tab"
                    >
                        Users
                    </inertia-link>
                </div>
            </div>
        </div>
    </nav>
    <section class="section">
        <div class="container">
            <!--
                jika variabel message tidak kosong ada maka akan
                ditampilkan pesan
            -->
            <div v-if="message" class="notification is-primary">
                <button class="delete" onclick="this.parentElement.style.display='none'" />
                {{ message }}
            </div>
            <slot />
        </div>
    </section>
    <footer class="footer">
        <div class="content has-text-centered">
            <p>
                <strong>©2021 Febri Hidayan</strong>
            </p>
        </div>
    </footer>
</template>

<script>
export default {
    props: {
        message: String
    },

    data() {
        return {
            isNavbar: false
        }
    }
}
</script>

Variabel isNavbar saya gunakan untuk bagian navigasi yang mana jika aplikasi berada pada tampilan yang lebih kecil dari 1024px, maka Anda akan menekan tombol baris tiga horizontal. Jadi variabel tersebut akan bernilai true jika Anda tekan dan begitu sebaliknya, hal itu untuk menampilkan menu pada navigasi.

Mohon berhatikan skrip di bawah ini:

<inertia-link :href="route('users.index')">

Skrip di atas adalah potongan skrip yang akan bahas sekarang, karena saya tidak akan bahas lagi di tutorial selanjutnya. Jadi, fungsi route bisa Anda gunakan layaknya Anda sedang melakukannya pada templat Blade Laravel. Tentu Anda bisa memanfaatkannya lebih dari contoh diatas dan itu sama persis seperti Anda melakukannya di templat Blade Laravel. Mohon perhatikan untuk nama perutean tentu saja sama dengan nama perutean dari Laravel.

Langkah 6 - Tetap Jalankan Kompilasi Aset

Agar proses kompiler tetap berjalan setiap kali perubahan pada kode Anda, maka gunakan watch. Tentu ada perbedaan setiap perintahnya baik dev, prod, atau hot, tetapi cukup jalankan perintah di bawah ini saja. Saya sendiri selalu menggunakannya saat mengembangkan aplikasi.

yarn watch
# atau
npm run watch

Catatan: Kemungkinan akan terjadi galat saat menjalankannya karena Can't resolve './Pages' yang mana Anda perlu manambahkan direktori Pages pada resources/js.

Catatan Umum Jika Anda menemukan peringatan dibawah ini setelah menjalankan perintah diatas, mohon tunggu hingga proses selesai. Karena ada beberapa package tambahan yang perlu di instal, inggat! proses ini akan menghentikan proses kompiler.

Running: yarn add @vue/compiler-sfc vue-loader@^16.1.0 --dev