Halo teman-teman semuanya, pada seri artikel kali ini kita semua akan belajar bersama-sama bagaimana cara membuat CRUD di Vue 3 (Vite) dengan Rest API yang dibuat menggunakan Laravel 10.
Apa itu Vue.js ?
Vue.js merupakan framework JavaScript yang digunakan untuk membangun User Interface (UI) yang menerapkan konsep component (component based). Vue.js bersifat open source dan menjadi salah ssatu framework JavaScript yang populer karena kemudahannya dalam dipelajari untuk pemula.
Pada seri ini kita akan belajar membuat project Vue.js 3 dengan bantuan build tool yang super cepat dan populer, yaitu Vite.
Apa itu Vite ?
Vite the next generation frontend tooling. It's fast!
Vite atau disebut juga Vit merupakan build tool atau frontend tooling yang dibangun di atas ESBuild dan memiliki performa yang super cepat dalam proses compiling. Sehingga dengan menggunakan Vite para pengembang aplikasi web akan mendapatkan pengelaman yang modern.
Vite dan Vue.js dibuat oleh orang yang sama, yaitu Evan You. Beliau dahulunya merupakan mantan software engineer di Google dan Meteor.js. Dan sekarang sudah fokus mengembangkan ekosistem Vue.js secara open source.
Sebelum Vite, dulu untuk membuat project baru di Vue.js menggunakan build tool yang bernama Vue CLI, build tool ini juga dikembangkan secara official oleh Vue.js core tim, cuman karena performa compiling-nya kurang bagus, maka kita direkomendasikan beralih menggunakan Vite. Tapi jangan kawatir, karena Vue CLI juga masih bisa digunakan dan terus dimaintenance.
Disclaimer!
Sebelum melanjutkan seri artikel ini, pastikan teman-teman sudah menyelesaikan materi tentang pembuatan Rest API menggunakan Laravel 10 di link berikut : https://santrikoding.com/tutorial-set/tutorial-restful-api-laravel-10
Langkah 1 - Installasi Node.js
Langkah pertama yang harus kita lakukan adalah menginstall Node.js di dalam komputer, jika teman-teman belum menginstall-nya, silahkan bisa unduh melalui situs resminya di : https://nodejs.org/en
Untuk memastikan apakah Node.js sudah berhasil terinstall, silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD.
node --version
npm --version
Langkah 2 - Membuat Project Vue 3 dengan Vite
Silahkan teman-teman masuk ke dalam folder dimana akan menyimpan project-nya, kemudian jalankan perintah berikut ini di dalam terminal/CMD.
npm create vite@4.2.0 vue3-crud -- --template vue
Jika perintah di atas berhasil dijalankan, maka kita akan membuat project Vue 3 dengan nama vue3-crud.
Langkah 3 - Menjalankan Project Vue 3 dengan Vite
Setelah project berhasil dibuat, maka kita perlu melakukan installasi dependency yang dibutuhkan sebelum menjalankan projectnya.
Silahkan jalanakn perintah berikut ini untuk masuk ke dalam folder project-nya.
cd vue3-crud
Setelah itu, jalankan perintah berikut ini.
npm install
Dan silahkan teman-teman tunggu proses installasinya sampai selesai dan pastikan terhubung dengan internet.
Setelah proses installasi selesai, maka kita bisa menjalankan project-nya dengan perintah berikut ini.
npm run dev
Jika berhasil, maka project Vue 3 kita akan dijalankan di dalam localhost menggunakan port 5173.
Kurang lebih seperti itu tutorial bagaimana cara melakukan installasi dan menjalankan project Vue.js 3 menggunakan Vite.
Pada artikel berikutnya kita semua akan belajar bagaimana cara membuat router untuk navigasi halaman scara SPA atau Single Page Application di dalam Vue.js 3 menggunakan Vue Router.
Terima Kasih