Vuetify ala carte

Kemarin saat lagi mengulang untuk mengingat serial tentang vue, saya memasang ulang vuetify dan terjadilah perbedaan di main.js seperti yang terlihat pada tulisan saya tentang vuetify kemarin.  Saat memasang vuetify ada dialog seperti berikut

? Project name prototipe
? Project description Prototipe dari vue
? Author ariesm
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

Ternyata di versi terbaru vuetify ada satu pertanyaan baru yaitu versi vuetify yang mana yang mau di pasang, kumplit atau ala carte. Lalu apa perbedaanya ?  Perbedaan yang terlihat tentu saja dari main.js.

versi ala carte

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 }
})

Versi kumplit

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 }
})

Perbedaanya, di ala carte komponen-komponen vuetify secara jelas ditampilkan di main.js dan di versi kumplit hanya satu yaitu import vuetify.

Nah yang kedua yang saya alami adalah, wajib mendaftarkan komponen yang akan digunakan apabila hendak digunakan.

Contohnya saat hendak menggunakan komponen vuetify text field, tidak bisa langsung panggil seperti ini

<v-text-field
             name="input-1"
             label="Label Text"
             id="testing"
           ></v-text-field>

Kenapa tidak bisa? Karena komponen tersebut dianggap belum tersedia makanya error. Pesan errornya pun cukup jelas Unknown custom element: <v-text-field>. Kita harus mendaftarkan dulu di main.js seperti berikut

// 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,
  VTextField
} from 'vuetify'
import './stylus/main.styl'

import App from './App'

Vue.use(Vuetify, {
  components: {
    VApp,
    VNavigationDrawer,
    VFooter,
    VList,
    VBtn,
    VIcon,
    VGrid,
    VToolbar,
    transitions,
    VTextField
  }
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

Baru setelah itu komponen text field bisa digunakan. Berbeda dengan saat memasang versi kumplit gak perlu daftar-daftaran lagi, tinggal panggil.

Saya juga gak terlalu merhatiin perbedaan apa selain yang saya tulis di atas, apakah lebih ringan atau lebih kecil karena ala carte itu tidak semua komponen di-build. Tapi ini pilihan sih kalau mau pake ala carte ya  silahkan mau pake yang kumplit juga gak apa-apa. Saya sendiri dalam proses belajar cukup kebantu dengan salah pasang ini, satu nambah bahan tulisan yang kedua belajar tentang mendaftarkan komponen, tapi saya lebih suka yang kumplit lebih praktis soalnya.