Vite, Vue, dan Vue-Router

Setelah sekian purnama akhirnya blog ini ada bahan tulisan lagi, jadi karena saya tertarik lagi ke vue dan ternyata ekosistem vue banyak hal baru akhirnya coba-coba dan berakhir jadi modal tulisan.

Vite

Vite ini build tool buatan Evan You orang yang sama yang membuat vue, vite ini mirip-mirip dengan webpack gitu tapi dengan kalim jauh lebih cepat dan membuat DX lebih menyenangkan.

Vue

Sepertinya tidak perlu diceritain lagi vue ya, saya tertarik kembali mempelajari vue karena vue baru saja rilis versi 3, dan ada hal baru di vue 3 yang membuat saya sangat tertarik yaitu composition api. Tapi ditulisan ini gak bahas itu dulu, ada tulisan terpisah nanti terkait impresi saya (siapa saya anjir??) dan kenapa alasan saya ingin belajar vue 3.

Vue-router

Vue router ini adalah library official(?) yang mempunyai fungsi untuk mengatur rute sebuah aplikasi vue, vue router ini yang nantinya membantu kita menentukan jika akses alamat tertentu maka akan munculin apa, contoh: masuk halaman “url/” muncul “home” akses “url/about” muncul “about”

Apa yang ditulis di sini

Di sini saya hanya membahas beberapa poin saja:
1. Scafolding vue app dengan vite
2. Memasang vue-router dan setup vue-router
3. Mencoba router dinamis (dynamic route) dan sedikit composition api

Scafolding vue app dengan vite

Selain building tool, vite dilengkapi juga dengan scafolding app, gak sebatas vue ada juga vanilla, raact, dan lainnya. Karena fokus saya di vue maka pilih vue nanti di opsi yang disediakan

npm init @vitejs/app folder-name-or-project-name

Perintah di atas akan memunculkan pilihan/opsi app yang ada

vanilla
> vue
react
preact
lit-element
svelte

Pilih vue, setelah memilih vue akan ada opsi pure js atau menggunakan typescript, pilih saja sesuai selera, dalam menulis ini saya pilih ynag js aja, saya belum terlalu familiar dengan ts soalnya hhe.

❯ vue
 vue-ts

Setelah selesai nanti akan terbuat folder sesuai project name yang ditulis. Masuk ke dalam folder project lalu jalankan perintah install

cd folder-name 
npm install

masih di dalam folder projek jalankan perintah npm run dev untuk mode development, lalu kunjungi “localhost:3000” maka akan muncul halaman default vue 3 seperti berikut

Memasang vue-router dan setup vue-router

Skenario yang dibuat sederhana saja, saya akan buat dua halaman pertama “/” yang saaat diakses akan memunculkan kalimat “hallo form home” dan “/about” yang saat diakses akan muncul “hallo from about”. Pertama, mari pasang dulu paket vue router dengan cara npm install vue-router@4 --save, kenapa versi 4 karena dari dokumentasi disarankan jika menggunakan vue 3 maka lebih baik pasang vue-router 4X

Selanjutnya, tambahkan folder baru yaitu “pages” sejajar dengan assets, components.

Sebenarnya pembuatan folder dengan nama pages ini tidak wajib, nama apa saja bisa, bahkan jika enggan bikin folder baru menggunakan folder yang sudah ada seperti components tidak masalah, namun karena ini konteksnya halaman web saya lebih senang untuk dipisahkan di folder pages

Dalam folder yang tadi dibuat, tambahkan dua berkas baru bernama “Home.vue” dan “About.vue” sekali lagi penamaan bebas sesuai selera. isi dari masing-masing berkas cukup sederhana

Home.vue

<template>
    hallo from home
</template>

About.vue

<template>
    Halo from about
</template>

Persiapan pertama usai, mari sekarang siapkan konfigurasi agar halaman dapat rute yang tepat harus munculin apa di masing-masing alamatnya.

Buka berkas `main.js` lalu tambahkan beberapa hal

import { createApp } from 'vue'
import App from './App.vue'
import {createRouter, createWebHistory} from 'vue-router' // import createrouter dan createWebHistory dari paket vue-router yang sudah diinstall
import Home from './pages/Home.vue'
import About from './pages/About.vue'
import Dynamic from './pages/Dynamic.vue'


//konfigurasi vue-router
const router = createRouter({
    history: createWebHistory(),
    routes:[
         {path: '/', name: "home", component: Home}, // path "/" diberi name "home" dan dia akan menampilkan konten dari "pages/Home.vue"
         {path: '/about', name: "about", component: About},
    ]
})


createApp(App).
use(router).// menambahkan "router" sebagai 'plugin" yang digunakan
mount('#app')

Sudah? Belum. Buka App.vue dan ubah jadi seperti berikut:

<template>
  <ul>
    <li><router-link to="/">Home</router-link></li>
    <li><router-link to="/about">About</router-link></li>
  </ul> 
  <router-view></router-view>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Penjelasan:
`<router-link to=”/”>`  = komponen ini bawaan dari vue-router, dan ini akan “dirender” sebagai link di browser yang menuju path “/”
`<router-view></router-view>` = komponen ini yang akan dinamis berubah sesuai halaman/komponent di konfigurasi di `main.js` misal, saat url menuju `/` di komponen ini akan memunculkan konten dari “pages/Home.vue” sesuai konfigurasi

Mencoba router dinamis (dynamic route) dan sedikit composition api

Sebuah alamat web terkadang tidak selalu statis, seringnya malah dinamis, misal saja halaman tulisan ini ‘komputer/pemograman/slug-konten’ isi setelah ‘pemograman/’ itu akan dinamis dan konten di dalamnya akan emnyesuaikan dengan yang dituju, lalu bagaimana vue-router mengatasinya? Ternyata cukup mudah, mari ulangi bebreapa step di atas

Buat tambahan berkas baru di “pages” saya beri nama “Dynamic.vue” sekali lagi nama ini bebas, lalu di folder “components” tambahkan berkas baru “Display.vue”, berkas ini nanti fungsinya untuk menampilkan alamat yang dinamis

Selanjutnya mari ubah berkas `main.js` dan tambahkan url baru

...lainya
import Dynamic from './pages/Dynamic.vue'

const router = createRouter({
    history: createWebHistory(),
    routes:[
         {path: '/', name: "home", component: Home},
         {path: '/about', name: "about", component: About},
         {path: '/dynamic/:name', name: "dynamic", component: Dynamic}, // tambahkan ini
    ]
})

Lihat url “dynamic” di sana ada “param” berupa “:name”, sedangkan komponent untuk pagenya tetap satu file. Oke selanjutnya mari kita buat agar pages bisa memunculkan halaman dinamis

Pertama kita atur dulu komponen `Display.vue`

<template>
    Hallo {{ name }}
</template>

<script setup>
defineProps({
  name: String
})
</script>

Penjelasan:
`<script setup>` ini merupakan fitur dari vue 3
`defineProps` ini sesuai namanya mendefinisikan prop di komponen Display
`Hallo {{ name }}` “Print” propert name di browser

Selanjutnya mari kita isi Dynamic.vue

<template>
   <Display :name=name></Display>
</template>

<script setup>
import Display from '../components/Display.vue'
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
const route = useRoute()
const name = ref(route.params.name)

watch(
      () => route.params.name,
       newValue => {
        name.value = route.params.name
      }
    )
</script>

Penjelasan:
`const route = useRoute()` Memanggil fungsi useRoute() karena di dalam script setup kita tidak bisa mengakses this.$route
`const name = ref(route.params.name)` variable name yang berupa ref(), kenapa ref() ini agar variable name bersiafat reaktif
`watch()` = Berfungsi untuk mendeteksi perubahan pada variable name

Untuk informasi terkait ref() di vue3 bisa cari atau baca terkait composition api

Terakhir tambahkan link baru di App.vue

<li><router-link to="/dynamic/luffy">Luffy</router-link></li>
<li><router-link to="/dynamic/zoro">Zoro</router-link></li>

Hasilnya

 

Referensi:
https://next.router.vuejs.org/guide/essentials/dynamic-matching.html
https://vueschool.io/lessons/installing-and-setting-up-vue-router-with-vite-vite-only