Struktur Berkas dan Routing - Socket.io dan Vue.js

Perlu diketahu semenjak Vue.js 3 hadir banyak sekali perbedaan yang melanggar dan itu harus Anda pelajar bagi yang sudah mencoba di versi sebelumnya. Perubahan itu bukan saja terdampak pada Vue.js tetapi juga di Vue Router, silakan amati perubahan ini. Jadi Pada tahapan ini Anda akan menambahkan berkas, membuat rute dan menambahkan skrip.

Daftar isi:

1. Struktur berkas

Silakan untuk membuat berkas berdasarkan struktur berkas dibawah ini, jadi Anda membuatnya dari direktori utama.

server.js
|
|---src
|   |   router.js
|   |
|   `---pages
|           chat.vue
|           index.vue
|           login.vue

Catatan: Silakan lihat pada repositori Github untuk melihat dimana berkas tersebut diletakan Cek Github.

2. Routing vue router

Buka berkas router.js pada direktori src salin dan tempelkan skrip dibawah ini pada berkas tersebut.

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

const router = createRouter({
    history: createWebHistory(),
    linkActiveClass: 'is-active',
    linkExactActiveClass: 'is-active',
    routes: [
        {
            path: '/',
            name: 'home',
            component: () => import('./pages/index.vue')
        },
        {
            path: '/chat',
            name: 'chat',
            component: () => import('./pages/chat.vue')
        },
        {
            path: '/login',
            name: 'login',
            component: () => import('./pages/login.vue')
        },
    ]
})

export default router

Dari skrip diatas Anda akan melihat perbedaan dari versi sebelumnya (Vue Router yang dimaksud), hanya memanggil fungsi yang akan digunakan saja. Seakan-akan itu membuat ukuran skrip berkurang saat melakukan build produksi.

Mungkin sebagian diantara Anda sudah tahu apa itu history, linkActiveClass, dan linkExactActiveClass.

Jadi untuk history ada dua macam yaitu mode hash dan HTML5 berdasarkan hasil kutipan saya dari dokumen resmi Vue Router. Perbedaannya kalau mode hash tautan Anda akan menggunakan karakter hash (#), sedangkan mode HTML5 merupakan mode rekomendasi yang menjadikan tautan terlihat normal.

  • Mode hash tautan seperti http://domain.dev/#/user
  • Mode HTML5 tautan seperti http://domain.dev/user

3. Skrip berkas main.js

Sekarang ganti semua skrip pada berkas main.js, salin dan tempelkan skrip dibawah ini pada berkas tersebut. Berkas main.js sebagai berkas utama dari Vue.js yang akan memanggil semua berkas yang diperlukan.

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

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

4. Skrip berkas App.vue

Perlu ketahui berkas App.vue adalah berkas utama yang secara bawaan sudah ada pada saat instalasi melalui Vue CLI. Jadi silakan buka berkas tersebut dan ganti semua dengan skrip dibawah ini.

<template>
    <nav class="navbar has-shadow">
        <div class="container">
            <div class="navbar-brand">
                <router-link :to="{name:'home'}" class="navbar-item">Realtime Chat</router-link>
                <a
                    @click="isNavbar = !isNavbar"
                    :class="[`navbar-burger`, {
                        'is-active': isNavbar
                    }]"
                >
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
            </div>
            <div
                :class="[`navbar-menu`, {
                    'is-active': isNavbar
                }]"
            >
                <div class="navbar-end">
                    <router-link :to="{name:'chat'}" class="navbar-item">Chat</router-link>
                </div>
            </div>
        </div>
    </nav>
    <section class="section">
        <div class="container">
            <router-view />
        </div>
    </section>
</template>

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

Skrip diatas digunakan untuk membuat menu navbar yang terdapat beberapa menu tautan, jadi Anda bisa mengamatinya. Silakan bagi yang ingin belajar kerangka kerja CSS Bulma, karena tutorial ini menggunakan kerangka kerja CSS tersebut.

Hmmm!, bagaimana proses SPA (Single Page Application) berada?

Sebenarnya bukan SPA berada melainkan dimanakah proses pengantihan halaman tanpa melakukan penyegaran halan terjadi. Anda bisa perhatikan skrip <router-view /> yang memungkinkan semua skrip pada rute halaman tertentu akan di muat pada tempat tersebut.

5. Skrip berkas index.vue

Sekarang waktunya untuk membuat halaman utama, salin dan tempelkan skrip dibawah ini pada berkas index.vue.

<template>
    <section class="section">
        <div class="container has-text-centered">
            <h1 class="title">Aplikasi Realtime Chat dengan Socket.io dan Vue.js</h1>
            <router-link :to="{name:'chat'}" class="button is-primary">Lihat Chat</router-link>
        </div>
    </section>
</template>

Berikut hasil halaman yang Anda buat:

hasl