Apa itu Vuetify?, dan Bagaimana Cara Menggunakannya pada Vue Js

Halo semuanya, kembali lagi di sahretech. Baiklah pada kesempatan kali ini kita akan mengenal apa itu vuetify dan bagaimana cara mengintegrasikan vuetify dengan project vue js. Penasaran?, ayo ikuti tutorialnya berikut ini!.

Disadur dari laman resmi vuetify, vuetify adalah vue ui library yang menggunakan model material desain, dimana material desain adalah model desain ala-ala google. Sama seperti bootstrap, vuetify juga memberikan berbagai component yang bisa kalian gunakan untuk membangun website yang lebih interaktif, dan beautiful.

Dalam tutorial kali ini, kita akan mencoba mengintegrasikan vue js dengan vuetify, kita akan menggunakan wireframe yang telah disediakan oleh vuetify. Wireframe yang akan kita gunakan adalah base model vuetify dengan beberapa tambahan komponen di dalamnya.

Baca Artikel Lain ✨

📰 1. Membuat Notifikasi Realtime dengan php dan Jquery read more

📰 2. Cara Membuat Hide/Show Input Password dengan Javascript dan Bootstrap read more

📰 3. Cara Mencegah Multiple Submit dan Cara Menggunakan Spinner Bootstrap sebagai Indicator Loading pada Php read more

1. Cara Install Vuetify di Vue Js

Pada tutorial kali ini kita akan menggunakan vue js versi 2 dan saya asumsikan juga, bahwa kalian sudah menginstall vue js dengan menggunakan vue cli. Jika kalian terkendala masalah instalasi vue js dengan vue cli, silahkan baca artikel di link berikut ini https://www.sahretech.com/2020/11/cara-install-vue-js-dengan-vue-cli.html

Buka cmd atau terminal, lalu masuk ke direktori vuejs kalian. Kemudian jalankan perintah berikut ini untuk menginstall vuetify.

vue add vuetify

Setelah proses instalasi selesai, jalankan perintah npm run serve. Lalu buka di browser dengan url akses yang diberikan. Kalian akan melihat tampilan vue js telah berubah menjadi vuetify seperti gambar di bawah ini.

Tampilan awal vuetify

2. Cara Pasang Template Vuetify

Setelah berhasil menginstall vuetify, selanjutnya kita akan coba menerapkan beberapa komponen yang ada. Pertama kita akan merubah tampilan awal vuetify dengan base model vuetify. Silahkan buka file App.vue, lalu ganti bagian isi file tersebut dengan script yang ada di bawah ini

<template>
  <v-app id="inspire">
    <v-navigation-drawer
      v-model="drawer"
      app
    >
      <!-- paste menu disini -->
    </v-navigation-drawer>

    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>

    <v-main>
      <!-- paste konten disini -->
    </v-main>
  </v-app>
</template>

<script>
  export default {
    data: () => ({ drawer: null }),
  }
</script>

Sekarang jalankan kembali atau refresh halaman vuejs kalian, hasilnya akan berubah seperti gambar di bawah ini.

Memasang template vuetify

Dan jika kalian bertanya dimana saya mendapatkan script tersebut, jawabannya ada di link berikut ini https://vuetifyjs.com/en/getting-started/wireframes/#examples. Terdapat beberapa model wireframe lainnya yang bisa kalian gunakan.

Contoh template vuetify 

3. Cara Menambah Menu 

Untuk menambah menu pada template vuetify sangat mudah sekali, silahkan copy script di bawah ini dan paste di bagian <!-- paste menu disini --> di dalam file App.vue

<v-list dense nav>
    <v-list-item link>
        <v-list-item-icon>
            <v-icon>mdi-view-dashboard</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
            <v-list-item-title>Dashboard</v-list-item-title>
        </v-list-item-content>
    </v-list-item>

    <v-list-item link>
        <v-list-item-icon>
            <v-icon>mdi-image</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
            <v-list-item-title>Photos</v-list-item-title>
        </v-list-item-content>
    </v-list-item>

    <v-list-item link>
        <v-list-item-icon>
            <v-icon>mdi-help-box</v-icon>
        </v-list-item-icon>

        <v-list-item-content>
            <v-list-item-title>About</v-list-item-title>
        </v-list-item-content>
    </v-list-item>
</v-list>

Jalankan kembali atau refresh project vue js kalian, maka tampilannya akan berubah seperti gambar di bawah ini.

Menambah menu pada vuetify

Untuk dokumentasi component menu dan cara-cara menggunakannya kalian bisa mengunjungi link berikut ini https://vuetifyjs.com/en/components/navigation-drawers/#usage.

4. Cara Menambah Content

Selanjutnya kita akan coba menambah content yang berada di tengah-tengah halaman, sebetulnya content boleh kalian isi bebas, tapi kali ini saya akan memasukkan material card. Silahkan copy script di bawah ini dan pastekan pada bagian <!-- paste konten disini--> di dalam file App.vue

<v-card :loading="loading" class="mx-5 my-5" max-width="374">
    <template slot="progress">
        <v-progress-linear
            color="deep-purple"
            height="10"
            indeterminate
          ></v-progress-linear>
    </template>

    <v-img
        height="250"
        src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
    ></v-img>

    <v-card-title>Cafe Badilico</v-card-title>
    <v-card-text>
        <v-row align="center" class="mx-0">
            <v-rating
              :value="4.5"
              color="amber"
              dense
              half-increments
              readonly
              size="14"
            ></v-rating>

            <div class="grey--text ml-4">
              4.5 (413)
            </div>
          </v-row>

          <div class="my-4 subtitle-1">
            $ • Italian, Cafe
          </div>

          <div>
            Small plates, salads & sandwiches - an intimate setting with 12
            indoor seats plus patio seating.
          </div>
    </v-card-text>
</v-card>

Jalankan kembali atau refresh halaman vue js kalian, hasilnya akan berubah seperti gambar di bawah ini.

Menambahkan konten

Itulah sedikit perkenalan tentang vuetify dan bagaimana cara menggunakannya. Nah sekarang kalian pilih mana nih?, pake vuetify atau bootstrap?. Keduanya sama-sama memiliki komponen dan dokumentasi yang lengkap.

Sekarang kalian bisa melakukan improvisasi mandiri dengan menambahkan fungsi-fungsi yang ada pada vue js seperti v-if, v-for, dsb.

Sekian tutorial kali ini mengenai apa itu vuetify dan bagaimana cara menggunakannya pada vue js. Semoga artikel ini bermanfaat, jika ada yang ingin ditanyakan silahkan tulis di kolom komentar di bawah postingan ini. Sampai jumpa di tutorial vue js lainnya.