Component merupakan salah satu fitur yang powerful dari Vue.js, karena pada component kita dapat merubah nama component tersebut menjadi tag HTML yang dapat kita gunakan kembali tanpa perlu menuliskan kembali element tersebut, sehingga dapat mempercepat proses development, dan juga dapat memudahkan kita dalam me-maintenance system atau code yang telah kita buat. Pada materi kali ini kita akan membahas tentang bagai mana Cara Membuat Component Vue.Js Pada Framework Laravel.

Seperti yang kita ketahui bahwa pada framework laravel terdapat sebuah default framework javascript yaitu Vue.js jadi pada saat kita melakukan installasi pada framework laravel maka secara otomatis di dalam framework laravel tersebut terdapat vue.js.

Keunggulan jika kita menggunakan vue.js pada laravel yaitu, kita bisa lebih focus kepada masalah logic bisnis aplikasi yang kita buat, pada materi Cara Membuat Component Vue.Js Pada Framework Laravel kali ini kita akan mencoba untuk menampilkan sebuah data dari component vue.js yang telah terinstall pada framework laravelnya.

Langkah pertama pastikan teman-teman telah menginstall laravel dan software-software pendukung lainnya jika belum teman-teman bisa lihat pada tutorial https://kursuswebprogramming.com/software-atau-tool-untuk-mendevelop-menggunakan-laravel-vuejs/

Selanjutnya pada project laravel yang telah teman-teman install silahkan teman-teman buka sebuah file vue.js bawaan dari laravelnya yaitu app.js, pada folder resources/js/app.js seperti dibawah ini :

Cara Membuat Component Vue.Js Pada Framework Laravel

File app.js merupakan file vue.js yang pertama kali yang akan dijalankan oleh laravel karena di dalam file app.js tersebut terdapat class-class dari vue.js yang nantinya akan digunakan, pada file app.js terdapat sebuah script const app sepeti dibawah ini :

Cara Membuat Component Vue.Js Pada Framework Laravel

Yang mana const app tersebut merupakan inisiasi dari class-class vue sedangkan  el: ‘#app’ merupakan tag element yang nantinya akan kita gunakan pada template blade laravel.

Kemudian pada file app.js juga terdapat sebuah sample untuk pemanggilan component seperti dibawah ini :

Cara Membuat Component Vue.Js Pada Framework Laravel

Jadi untuk component-component yang nantinya akan kita buat harus kita include didalam file app.js, kemudian kita juga harus mendefinisikan nama componentnya, untuk script diatas kita menggunakan nama component yaitu example-component, dan nantinya nama atau inisial dari component tersebut akan rubah menjadi tag html yang nantinya akan kita buat didalam folder components

Cara Membuat Component Vue.Js Pada Framework Laravel

Oke teman-teman kita akan langsung membuat sebuah file pada folder components dengan nama HalloComponent.vue seperti dibawah ini :

Cara Membuat Component Vue.Js Pada Framework Laravel

Selanjutnya setelah kita membuat file vue.jsnya ada beberapa hal yang harus kita ketahui yaitu di dalam file tersebut harus terdapat tag <template>…</template>, template tersebut merupakan tag bawaan dari vue.js yang harus kita buat jika kita ingin memanggil file-file yang berada pada folder Components, jika tag <template> tersebut tidak dibuat maka code-code yang terdapat di dalam folder components tersebut tidak dapat di tampilkan ke browser.

WhatsApp chat