Jika teman-teman sudah pernah belajar menggunakan vuejs, vuetify inilah yang cocok untuk lanjutan dari kita menggunakan vuejs, karena dengan vuetify tampilan kita jadi lebih rapih, dan menarik, walaupun kita juga bisa menggunakan seperti bootstrap, tetapi vuetify lah yang menurut saya cocok, oke untuk belajar yang pertama kita akan belajar cara membuat toolbar dengan Vuetify, jadi jangan kemana-mana simak terus ya.

Sebeleum teman-teman belajar cara membuat toolbar dengan Vuetify, saya sarankan teman-teman sudah pernah belajar vuejs ya, dan menggunakan CLI, karena dimana nantinya akan ada library-library yang ingin kita masukan disini, dan disini juga saya menggunakan CLI, jika teman-teman belum tau bagaimana cara menginstall CLI, teman-teman bisa search artikel saya tentang menginstall vuetify.

Toolbar sendiri adalah component yang sering kita jumpai apa lagi ketika teman-teman membuat tampilan untuk CMS, tau ya toolbar suatu elemen yang ada di atas sebuah template, semacam header tetapi isinya ada beberapa menu, oke langsung saja, caranya cukup simple seperti ini silahkan, buat file, disini saya membuat file Navbar.vue di dalam sebuah folder components, dan ini adalah templatenya.

Bisa teman-teman lihat disini terdapat sebuah {{ }} kurung kurawal 2x saya menyebutnya, itu adalah cara vuejs, dan disini saya gunakan untuk melooping data menunya, nah jadi tau ya kenapa saya sarankan teman-teman harus belajar vuejs itu ya untuk ini, oke untuk scriptnya seperti ini:

jadi disini saya membuat toolbar dimana terdapat sebuah menu yang isi sub menu itu terdiri dari administrator dan logout, seperti itu, oke jika teman-teman berhasil maka tampilannya akan seperti ini:

cara membuat toolbar dengan Vuetify

bagaimana apakah ada yang sudah berhasil, bagaimana cukup simple ya, oke saya rasa cukup sampai disini belajar kita tentang cara membuat toolbar dengan Vuetify, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.