Cara Install & Setup Vuetify pada Laravel

Catatan sebelumnya tentang cara install vuejs pada laravel menjadi tulisan pertama kali di blog ini. Catatan ini merupakan kelanjutan dari catatan tersebut. Sehingga pada kesempatan kali ini, diasumsikan bahwa project laravel sudah diinstall dengan VueJS. Jadi kali ini tinggal install dan setup Vuetify saja.

Sebelum masuk ke pembahasan teknis, aku akan menjelaskan sedikit mengenai apa itu Vuetify.

Vuetify adalah komponen library yang dibuat berdasarkan standar meterial desain, diterima secara luas oleh komunitas developer karena menyesuaikan desktop maupun mobile dengan kemampuan responsive, fleksibel, dan mudah dikembangkan ulang. Selengkapnya dapat dilihat pada laman vuetifyjs.com.

Instalasi Vuetify di Laravel

Langsung saja kita membahas mengenai cara instalasi Vuetify di Laravel.

Buka command promp kemudian masuk ke direktori app laravel yang telah dibuat. Setelah itu install Vuetify menggunakan npm seperti di bawah ini:

npm install vuetify

Setup Vuetify

Agar vuetify dapat digunakan pada project laravel maka kita perlu melakukan setup terlebih dahulu. Caranya adalah sebagai berikur.

Buka file app.js yang berada di dalam direktori resources/js selanjutkan import dan daftarkan Vuetify ke dalam sistem VueJS menggunakan kede di bawah ini:

import Vuetify from 'vuetify';
Vue.use(Vuetify);

Selanjutnya tambahkan vuetify sebagai argumen pada app yang dibuat oleh Vue sehingga kodingannya tampak seperti di bawah ini:

const app = new Vue({
    el: '#app',
    vuetify: new Vuetify(),
});

Tambahkan style vuetify pada resources/css/sass/app.scss

@import '~vuetify/dist/vuetify.min.css';

Menggunakan Vuetify

Untuk dapat menggunakan vuetify maka kita bisa menggunakan <v-app></v-app> sebagai kontainer app vue.

Misalnya saja kita membuat komponen vue dengan nama UserInfo.vue maka untuk dapat menggunakan vuetify pada komponen tersebut harus dimasukkan ke dalam tag <v-app></v-app>. Contoh penggunaannya adalah sebagai berikut:

<v-app>
  <user-info></user-info>
</v-app>