Vue 2 with Vuetify Example
Tags: example, vue, vuetify
Published: 2022-11-24 08:20:25

Pada catatan ini akan dibahas mengenai proses instalasi Vue 2 melalui Vue CLI dan menambahkan instalasi Vuetify di atasnya.

## Apa itu Vue.js?

Vue dibaca seperti view adalah sebuah framework progresif untuk membantu pembuatan user interface. Core library-nya difokuskan pada layer tampilan saja, sehingga sangat mudah untuk diintegrasikan dengan library yang lain atau dengan project yang sudah ada. Dengan menggunakan Vue, akan sangat membantu dalam proses pembuatan SPA atau Single Page Application yang canggih dan interaktif.

## Instalasi

Vue dapat di-instal dengan beberapa cara yang berbeda, tapi pada kesempatan kali ini kita akan membahas proses installasi Vue melalui CLI.
Vue sudah menyediakan CLI resmi untuk mempermudah proses instalasi hingga ke proses development aplikasi yang akan dibuat. Untuk dapat menggunakan Vue CLI tentunya di komputer harus sudah terinstall Node.js.

> Apabila menggunakan Vue CLI versi 4.x akan memerlukan Node.js versi 8.9 ke atas dan direkomendasikan menggunakan versi 10 ke atas.

### Memeriksa installasi node.js

Untuk memeriksa installasi node.js bisa menggunakan perintah berikut:

```bash
Node --version
```

atau

```bash
Node -v
```

Maka akan menampilkan versi node.js yang terinstal seperti berikut:

```bash
v16.15.0
```

Apabila output yang keluar adalah `command not found: node` berarti node.js belum terinstall pada komputer. Untuk instalasi node.js bisa download di link berikut: [nodejs.org](https://nodejs.org/en/) atau dengan menggunakan nvm (Node Version Manager).

### Instalasi Vue CLI

Setelah memastikan bahwa node.js sudah terinstal pada komputer, selanjutnya kita dapat melanjutkan ke proses instalasi Vue CLI dengan perintah berikut:

```bash
npm install -g @vue/cli
```

atau

```bash
yarn global add @vue/cli
```

Seperti biasa untuk memastikan apakah instalasi sudah berhasil bisa dengan menggunakan perintah berkut:

```bash
vue --version
```

Maka akan menampilkan versi Vue CLI yang terinstal seperti berikut:

```bash
@vue/cli 4.5.13
```

## Pembuatan Project

Untuk membuat project baru dengan menggunakan Vue CLI dapat menggunakan perintah berikut:

```bash
vue create vue-2-vuetify-example
```

> `vue-2-vuetify-example` disesuaikan dengan nama project yang dikehendaki. Dengan begini Vue CLI akan membuat folder berisi Vue project sesuai dengan nama project tadi sebagai sub folder dari flder asal dimana kita memulai menjalankan terminal atau command promt.

Setelah menjalankan perintah di atas maka akan muncul tampilan seperti berikut:

![Vue 2 create project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pg9favbkfg4u62n0owe1.png)

Pilih Manually select features lalu klik enter, lalu pilih feature yang dikehendaki dengan menggunakan space:

![Features](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imkatjwg34k00ewu9q1y.png)

Kemudian pilih Vue versi 2

![Vue 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/348cb61i1fdy1a5ff2bz.png)

Pilih yes untuk mode penggunaan router

![Vue router](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ct3aka9ytwb9znssib9g.png)

Pilih ESLint + Prettier

![ESLint + Prettier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqc6x9umrbe9f47dpuqu.png)

Pilih Lint on save

![Lint on save](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd908gej8lbsfskif6kf.png)

Pilih In package.json

![Project config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6nrnen47r7ilzi0tzxg.png)

Selanjutnya Vue CLI akan mempersiapkan project di folder yang sudah ditentukan sebelumnya.

Setelah proses pembuatan project selesai, buka folder project yang sudah dibuat dengan menggunakan Visual Studio Code dengan menggunakan perintah berikut:

```bash
cd coba-project && code .
```

Saat ini sebetulnya project sudah bisa dijalankan dengan perintah `npm run serve` tapi sebelumnya kita akan menambahkan Vuetify terlebih dahulu.


## Penambahan Vuetify

Untuk menambahkan Vuetify pada Vue project dapat dilakukan dengan menggunakan perintah berikut:

```bash
vue add vuetify
```

Kali ini kita akan menggunakan pilihan Default

![Add Vuetify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yr92vt3jozj33olngpd7.png)

Setelah penambahan vuetify berhasil, kita dapat menjalankan development server dengan perintah berikut:

```bash
npm run serve
```

Maka development server akan bisa diakses pada link yang muncul di terminal seperti berikut:

![Running dev server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ku09lvogqyt83mcm8bq8.png)

Berikut adalah tampilan default aplikasi web yang dibuat dengan Vue setelah menambahkan Vuetify

![Default landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glftfqs1kx9mzn4g4ces.png)

## Membuat Layout Aplikasi

Untuk memudahkan dalam proses pembuatan layout, kita akan menggunakan wireframe template yang sudah dipersiapkan oleh Vuetify yang dapat diambil dari halaman [vuetifyjs.com/en/getting-started/wireframes/](https://vuetifyjs.com/en/getting-started/wireframes/).

Pada project yang sudah kita buat sebelumnya, buka file `/src/App.vue` lalu ganti semua konten file menjadi seperti berikut:

{% gist https://gist.github.com/ahoNerd/38988490292e1a5fea0bd543adadfbcd file=App-00.vue %}

![Custom landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f5p15rlpc8alrpxggovj.png)

## Membuat Navigasi

Navigasi halaman akan ditangani oleh Vue router, sehingga untuk manambahkan item baru pada router maka kita akan menambahkannya pada file `/src/router/index.js` sebagai berikut:

{% gist https://gist.github.com/ahoNerd/38988490292e1a5fea0bd543adadfbcd file=src_router_index-add.js %}

Sehingga file tersebut menjadi seperti berikut:

{% gist https://gist.github.com/ahoNerd/38988490292e1a5fea0bd543adadfbcd file=src_router_index.js %}

Selanjutnya kita akan membuat file baru, yaitu `/src/views/Mahasiswa.vue` dengan mengisi konten sementara sebagai berikut:

```vue
<template>
  <div class="mahasiswa">
    <h1>Mahasiswa</h1>
  </div>
</template>
```

Dan untuk menampilkan navigasi pada aplikasi kita akan mengedit file `/src/App.vue` dengan mengganti

```vue
<!-- untuk navigasi -->
```

Atau di antara tag `<v-navigation-drawer></v-navigation-drawer>`

Menjadi sebagai berikut (baris 10-33):

{% gist https://gist.github.com/ahoNerd/38988490292e1a5fea0bd543adadfbcd file=App-01.vue %}

Masih di file yang sama yaitu `/src/App.vue`, kita juga harus megedit bagian script menjadi sebagai berikut (baris 51-56):

{% gist https://gist.github.com/ahoNerd/38988490292e1a5fea0bd543adadfbcd file=App-02.vue %}


Di atas kita sudah menggunakan Vue directives, yaitu `v-for`. Fungi dari directives ini adalah untuk looping item dari object yang didefinisikan kemudian menampilkannya. Pada contoh di atas kita menggunakan isi dari object dengan nama `navItems`. Attribute to di atas berfungsi untuk melakukan navigasi antar routes yang sudah dibuat sebelumnya dengan memanfaatkan feature dari Vue router. Sehingga apabila di-klik halaman akan berpindah sesuai dengan root path yang sudah ditentukan tanpa perlu reload ulang aplikasi. Tidak seperti attribute href pada tag a yang apabila di-klik secara default akan reload halaman web untuk membuka konten baru dari link pada href attribute-nya. Sehingga perpindahan halaman dengan menggunakan router ini akan jauh lebih cepat apabila dibandingkan dengan menggunakan tag a.

Setelah perubahan di atas, maka tampilan aplikasi akan menjadi seperti berikut:

![Custom vuetify page 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1jiap06h8oj3oou9lyd.png)

![Custom vuetify page 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9erbbm18h7w5vtg9agqq.png)

![Custom vuetify page 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6t1pa51qx4w9p4oodfi.png)

## Pembuatan dan Penggunan Component

Untuk memahami konsep komponen pada Vue akan kita coba implementasi langsung dengan memodifikasi views yang suda ada. Pertama kita aka membuat file baru, yaitu `/src/components/About.vue` kemudian buat template sebagai berikut:

{% gist https://gist.github.com/ahoNerd/38988490292e1a5fea0bd543adadfbcd file=src_components_About-01.vue %}

Kemudian kita modifikasi file `/src/views/About.vue` menjadi sebagai berikut:

{% gist https://gist.github.com/ahoNerd/38988490292e1a5fea0bd543adadfbcd file=src_views_About.vue %}

Setelah melakukan perubahan di atas, tidak akan terjadi perubahan pada tampilan aplikasi. Hanya saja perbedaanya kali ini halaman about ditampilkan dengan menggunakan komponen. Komponen ini bisa digunakan ulang dari beberapa views yang berbeda dan tetap bisa dinamis dengan menentukan props yang berbeda.

## `Watch`, `Methods` dan `Lifecycle Hook`

Methods pada Vue digunakan untuk mendefinisikan function yang dapat digunakan untuk melakukan suatu perintah. Function yang didefinisikan pada methods dapat diakses langsung dari component melalui attribute @click atau dapat juga dipanggil pada lifecycle seperti mounted atau created. Watch dapat digunakan untuk memantau perubahan pada ractive property dan menjalankan function tertentu berdasarka perubahan tersebut.

Untuk penjelasan lebih detail mengenai Vue lifecycle dapat dipelajari pada halaman berikut: [v2.vuejs.org/v2/guide](https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram)

Untuk mendemonstrasikan cara penggunaan methods dan lifecycle kita akan melakukan perubahan pada file `/src/components/About.vue` sebagai berikut:

{% gist https://gist.github.com/ahoNerd/38988490292e1a5fea0bd543adadfbcd file=src_components_About-02.vue %}

Pada awalnya variable nama berisi string kosong, akan tetapi variable tersebut dimanipulasi dengan function setNama pada saat mounted. Contoh lain penggunaan methods yaitu pemanggilan function tambah yang dilakukan langsung dari attribute `v-btn`, sehingga apabila tombol tambah di-klik maka angka yang ditampilkan pada `v-chip` disebelanyapun akan bertambah, begitupun dengan tombol kurang.

Kemudian kita memantau perubahan pada variable angka dengan menggunakan watch, sehingga `v-chip` dengan attribute `v-if="sepuluh"` hanya akan tampil apabila angka sama dengan `sepuluh`.

### Contoh `Methods`

![Methods example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1awax5kxxasaz49mrdvp.png)

### Contoh `Watch`

![Watch example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bb1xu8fz021cg216loi.png)

## Membuat Table Mahasiswa

Berikutnya kita akan mencoba menampilkan data mahasiswa yang disimpan di vuex store melalui mapGetters. Untuk itu kita akan melakukan perubahan pada file `/src/store/index.js` pada bagian state dan getters, sebagai berikut:

{% gist https://gist.github.com/ahoNerd/38988490292e1a5fea0bd543adadfbcd file=src_store_index.js %}

Object `state.listMahasiswa` di atas akan kita gunakan untuk menyimpan data mahasiswa yang kemudian data tersebut akan bisa diakses melalui getters.

Kemudian kita juga akan melakukan perubahan pada file `/src/views/Mahasiswa.vue` menjadi sebagai berikut:

{% gist https://gist.github.com/ahoNerd/38988490292e1a5fea0bd543adadfbcd file=src_views_Mahasiswa.vue %}

Untuk dapat mangambil data dari vuex store di atas kita menggunakan `mapGetters` dengan terlebih dahulu melakukan import `mapGetters` dari vuex, kemudian untuk mendapatkan feature reactivity kita akan menyimpan data listMahasiswa pada Vue computed property. Dengan begini apabila data di vuex store mengalami perubahan, maka variable yang ada di computed property juga akan otomatis terupdate.

Setelah perubahan pada kedua file di atas, maka tampilan aplikasi kita akan menjadi seperti berikut:

![Table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fihilqs2cqzy9qbsmz6s.png)

## Demo

[Replit](https://vue-2-vuetify-example.ahonerd.repl.co/)

{% replit https://replit.com/@ahoNerd/vue-2-vuetify-example %}

## Source Code

[github.com/ahoNerd/vue-2-vuetify-example](https://github.com/ahoNerd/vue-2-vuetify-example)