Konfigurasi Berkas Laravel dan Vue.js

Saatnya lakukan beberapa konfigurasi berkas dibawah ini sebagai cara awal membuat tampilan halaman mulai dari navbar dan halaman indeks. Tutorial ini Anda akan belajar membuat rute dengan Vue Router dan mengambil komponen berkas.

Daftar isi:

Berkas app.css

Salin dan tempelkan pada berkas app.css pada direktori resources/css, ini akan mengambil semua skrip CSS.

@import '/node_modules/bulma/css/bulma.css';

Berkas App.vue

Skrip dibawah ini digunakan sebagai tata letak atau skrip utama yang akan digunakan disemua rute. Salin dan tempelkan semua skrip dibawa ini di berkas App.vue.

<template>
    <nav class="navbar has-shadow">
        <div class="container">
            <div class="navbar-brand">
                <router-link to="/" class="navbar-item">Home</router-link>
                <a
                    @click="isNavbarActive = !isNavbarActive"
                    role="button"
                    :class="['navbar-burger', {
                        'is-active': isNavbarActive
                    }]"
                >
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </a>
            </div>
            <div
                :class="['navbar-menu', {
                    'is-active': isNavbarActive
                }]"
            >
                <div class="navbar-end">
                <router-link to="/users" class="navbar-item is-tab">Users</router-link>
                </div>
            </div>
        </div>
    </nav>
    <section class="section">
        <div class="container">
            <router-view />
        </div>
    </section>
</template>

<script>
export default {
    data() {
        return {
            isNavbarActive: false
        }
    }
}
</script>

Penjelasan: Jadi kegunaan <router-view /> untuk menampilkan tampilan dari rute yang direspon.

Berkas index.vue

Skrip ini akan menampilkan halaman indeks dari tutorial ini dan lihat gambar dibawah untuk lebih jelasnya, bagaimana hasil dari skrip ini. Salin dan tempelkan pada berkas index.vue pada direktori resources/js/pages.

<template>
    <div class="has-text-centered">
        <h1 class="title">Tutorial CRUD Laravel dan Vue.js</h1>
        <router-link :to="{name: 'users.index'}" class="button is-primary">Data Pengguna</router-link>
    </div>
</template>

Berkas router.js

Pada skrip inilah Anda membuat rute di Vue Router baik dari path, component, dan name, masih ada yang lain untuk melakukan beberapa konfigurasi tersebut. Kabar baiknya saya sudah menambahkan fungsi page() untuk mengimpor komponen berdasarkan dimana berkas .vue berada. Jangan lupa salin dan tempelkan di berkas router.js.

import { createWebHistory, createRouter } from 'vue-router'

function page (path) {
  return () => import(`./pages/${path}`).then(m => m.default || m)
}

const history = createWebHistory()

const router = createRouter({
    history,
    linkActiveClass: 'is-active',
    linkExactActiveClass: 'is-active',
    routes: [
        {
            path: '/',
            component: page('index.vue'),
            name: 'home'
        },
        {
            path: '/users',
            component: page('users/index.vue'),
            name: 'users.index'
        },
        {
            path: '/users/create',
            component: page('users/create.vue'),
            name: 'users.create'
        },
        {
            path: '/users/:id/edit',
            component: page('users/edit.vue'),
            name: 'users.edit'
        },
        {
            path: '/users/:id',
            component: page('users/show.vue'),
            name: 'users.show'
        }
    ]
})

export default router

Berkas app.js

Sampai disini mungkin Anda bertanya tentang skrip dibawah ini yang mungkin beda dengan versi sebelumnya. Pada Vue.js 3 Anda bisa menggunakannya seperi ini yang membuat hasil build produksi lebih kecil dibandingkan versi sebelumnya. Salin dan tempelkan pada berkas app.js.

require('./bootstrap');

import { createApp } from "vue"
import App from "./App.vue"
import router from './router.js'

const app = createApp(App)

app.use(router)

app.mount('#app')

Sebenarnya skrip diatas agak sedikit panjang, Anda bisa menggunakannya seperi ini.

createApp(App)
    .use(router)
    .mount('#app')

Silakan lihat bagaimana beberapa berkas di panggil pada skrip diatas baik dari App.vue sebagai tata letak dan router.js untuk menerapkan rute. Skrip ini mount('#app') akan menerapkan root pada berkas app.blade.php disitu terdapat id="app" sebagai acuannya.

Berkas webpack.mix.js

Paling terakhir lakukan perubahan terhadap berkas webpack.mix.js pada direktori utama Laravel.

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

...

mix.js('resources/js/app.js', 'public/js').vue();

mix.postCss('resources/css/app.css', 'public/css', [
    //
]);

Lihatlah dan rasakan betapa indahnya ketika Anda melihat gambar dibawah ini, inilah hasil yang seharusnya Anda dapatkan selelah mengikuti tutorial sampai disini.

hasil