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">&copy; 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.

Saat memanggil <app-home></app-home>
Saat memanggil <app-list></app-list>

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">&copy; 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

Saat akses localhost:8080/
Saat akses locahost:8080/list

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">&copy; 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.

router link

 

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

https://vuetifyjs.com/vuetify/quick-start

https://router.vuejs.org/en/installation.html