Catatan Belajar Vue : Mengulang vuetify dan Memasang Vue Router
Akhirnya bisa lanjut belajar vue lagi, bulan lalu benar-benar bulan yang panjang ~~ dari resign, nyari kerja, dapet kerja dan hadeuh full lah pokonya, tapi masih bisa sih nulis-nulis yang pendek-pendek. Ya sudah bikin alesannya dan mari lanjut lagi tentang vue.
Mengulang layout dengan vuetify
Karena ditinggal lama akhirnya diputuskan mengulang lagi dengan vuetify dan sialnya struktur yang dihasilkan vuetify versi baru cukup berbeda dengan yang say coba sebelumnya.
Yang lama pada main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Vuetify from 'vuetify'
import './stylus/main.styl'
import App from './App'
Vue.use(Vuetify)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
Yang baru ada sedikit perbedaan dari component vuetify
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import {
Vuetify,
VApp,
VNavigationDrawer,
VFooter,
VList,
VBtn,
VIcon,
VGrid,
VToolbar,
transitions
} from 'vuetify'
import './stylus/main.styl'
import App from './App'
Vue.use(Vuetify, {
components: {
VApp,
VNavigationDrawer,
VFooter,
VList,
VBtn,
VIcon,
VGrid,
VToolbar,
transitions
}
})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
Selebihnya untuk templating dan lainnya seperti biasa gunakan dokumentasi dari situs resmi vuetify.
Memasang vue-router
Sebenarnya pas masang vuetify dengan vue-cli sih udah ada pertanyaan untuk langsung memasang vue-router atau tidak dan kalau pilih yes otomatis siap jalan, namun demi konten saya putuskan untuk dipisah… hhe.
Sederhananya vue-router itu berfungsi untuk mengatur “lalu lintas” web nya, misal kalau akses ‘home’ maka yang muncul halaman home, akses ‘list’ masuk halaman list dan seterusnya. Langsung sajalah.
Sebelum memasang vue-router mari buat dulu beberapa component yang nantinya akan digunakan oleh router. Rencananya saya akan beuat dua halaman halaman ‘home’ dan halaman ‘list’, halaman ‘home’ isinya hanya ucapan selamat datang, di halaman ‘list’ isinya adalah list.
Component Home
Buat satu berkas Home.vue di folder src/components, lalu isikan dulu saja seperti ini
<template>
<v-layout>
Selamat Datang Ini Home
</v-layout>
</template>
Dan satu lagi masih di lokasi yang sama beri nama List.vue, isikan saja dulu seperti ini
<template>
<v-layout>
Ini Nanti ada List
</v-layout>
</template>
Untuk bisa lihat konten tersebut kita modifikasi dulu berkas App.vue
<template>
<v-app id="inspire">
<v-navigation-drawer
persistent
v-model="drawer"
enable-resize-watcher
app
>
<v-list dense>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>home</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Home</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>contact_mail</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>List</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar color="indigo" dark fixed app>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>Prototipe</v-toolbar-title>
</v-toolbar>
<main>
<v-content>
<v-container fluid fill-height>
<app-list></app-list>
</v-container>
</v-content>
</main>
<v-footer color="indigo" app>
<span class="white--text">© 2017</span>
</v-footer>
</v-app>
</template>
<script>
import Home from '@/components/Home'
import List from '@/components/List'
export default {
data: () => ({
drawer: true,
}),
components: {
'app-home' : Home,
'app-list': List
},
props: {
source: String
}
}
</script>
Yang perlu diperhatikan
Import
import Home from '@/components/Home' import List from '@/components/List'
Di sini saya memanggil component home dan list, lalu saya mendaftarkan component tersebut di
export default {
data: () => ({
drawer: true,
}),
components: {
'app-home' : Home,
'app-list': List
},
props: {
source: String
}
}
Untuk memanggilnya cukup panggil component yang sudah di daftarkan di template App.vue ini, misal memanggil component list
<v-content>
<v-container fluid fill-height>
<app-list></app-list>
</v-container>
</v-content>
Kalau manggil home,
<v-content>
<v-container fluid fill-height>
<app-home></app-home>
</v-container>
</v-content>
Dan saat lakukan perintah npm run dev tampilan akan berbeda tentunya tergantung component yang dipanggil.
Memasang vue-router
Untuk memasang vue-router gunakan perintah berikut
npm install vue-router
Setelah selesai, mencontoh dari tutorial yang saya tonton agar terstruktur buat satu folder di dalam src dengan nama router, dalam folder tersebut buat satu berkas dengan nama index.js. Isinya sebagai berikut
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import List from '@/components/List'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Root',
component: Home
},
{
path: '/list',
name: 'List',
component: List
}
],
mode: 'history'
})
Di sana saya mendaftarkan routes yang akan dipakai dan component mana yang akan dipanggil jika route yang dituju diakses.
Terus, di bagian App.vue, kita ubah menjadi
<template>
<v-app id="inspire">
<v-navigation-drawer
persistent
v-model="drawer"
enable-resize-watcher
app
>
<v-list dense>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>home</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Home</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>contact_mail</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>List</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar color="indigo" dark fixed app>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>Prototipe</v-toolbar-title>
</v-toolbar>
<main>
<v-content>
<v-container fluid fill-height>
<router-view></router-view>
</v-container>
</v-content>
</main>
<v-footer color="indigo" app>
<span class="white--text">© 2017</span>
</v-footer>
</v-app>
</template>
<script>
export default {
data: () => ({
drawer: true,
}),
props: {
source: String
}
}
</script>
Di sana component sebelumnya saya hilangkan karena sudah didaftarkan di router, lalu di bagian konten saya memanggil component <router-view></router-view> yang artinya bagian tersebut akan memunculkan component sesuai route yang dipanggil, sehingga akan menghasilkan
Sekarang untuk membuat link, ubah kembali App.vue menjadi seperti ini
<template>
<v-app id="inspire">
<v-navigation-drawer
persistent
v-model="drawer"
enable-resize-watcher
app
>
<v-list dense>
<v-list-tile v-for="menu in menus" :key="menu.name" router :to="menu.link">
<v-list-tile-action>
<v-icon>{{ menu.icon}}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ menu.name}}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar color="indigo" dark fixed app>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>Prototipe</v-toolbar-title>
</v-toolbar>
<main>
<v-content>
<v-container fluid fill-height>
<router-view></router-view>
</v-container>
</v-content>
</main>
<v-footer color="indigo" app>
<span class="white--text">© 2017</span>
</v-footer>
</v-app>
</template>
<script>
export default {
data: () => ({
drawer: true,
menus: [
{ icon: 'home', name: 'Home', link: '/' },
{ icon: 'playlist_add', name: 'Daftar', link: '/list' }
]
}),
props: {
source: String
}
}
</script>
Di sana saya menambahkan properti baru yaitu menus, yang isinya merupakan link sesuai route yang sudah dibuat tadi. Lalu pada bagian atas saya looping menggunakan v-list untuk memunculkan menunya. Sehingga saat diakses akan seperti berikut.
Ralat : Terjadi perbedaan karena saya yang salah setup, saya malah masang yang a-la carte jadi ada perbedaan dah di main.js.
Referensi :
https://www.youtube.com/watch?v=4lk9-PYensI