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