Halo teman-teman semuanya, di artikel sebelumnya kita sudah belajar bagaiamana cara membuat RESTful API di Laravel menggunakan ApiResource, di artikel kali ini kita semua akan belajar bagaimana cara installaasi dan persiapan untuk memaulai membuat project baru di Nuxt Js.
Apa itu Nuxt Js ?
Nuxt Js atau bisa disebut Nuxt merupakan sebuah framework yang dibangun di atas Vue Js. Yaps terdengar sangat aneh, karena Vue Js sendiri adalah framework, jadi Nuxt Js merupakan framework di atas framework dong ?.
Seperti yang kita tahu, jika mengembangkan aplikasi dengan Vue Js akan terkendala dengan yang namanya SEO atau Search Engine Optimization. Dengan menggunakan Nuxt kita bisa membuat aplikasi berbasis Vue Js tapi bisa melakukan server side rendering atau bisa disebut dengan SSR.
Tidak hanya itu, dengan menggunakan Nuxt Js, project yang dikembangkan memiliki struktur folder yang bagus dan memiliki banyak fitur magic-nya. Jika sebelumnya di dalam Vue Js kita membuat router secara manual, maka di Nuxt Js kita sudah otomatis dibuatkan tanpa perlu mendefinisikan route-route secara manual lagi. Dan tentunya masih banyak lagi fitur-fitur yang disediakan di dalam Nuxt Js yang bisa membantu kita dalam membangun sebuah aplikasi.
Sebelum itu kita harus menginstall Node Js terlebih dahulu di dalam komputer, karena paket-paket yang ada di dalam Nuxt Js akan diunduh menggunakan NPM yang ada di dalam Node Js.
Langkah 1 - Installasi Node Js
Pertama, silahkan lakukan installasi Node Js di komputer masing-masing, untuk link unduh Node Js bisa melalui berikut ini : https://nodejs.org/en/download/. SIlahkan di install sesuai dengan sistem operasi yang digunakan.
Untuk mengetahui apakah Node Js berhasil terinstall, kita bisa menjalankan perintah di bawah ini di dalam terminal/CMD :
node -v
Ketika kita menginstall Node Js maka secara otomatis NPM juga ikut terinstall, kita bisa mencoba melihatnya di :
npm -v
Langkah 2 - Membuat Project Baru di Nuxt Js
Setelah Node Js berhasil terinstall, sekarang kita bisa memembuat project baru di Nuxt Js dengan menggunakan NPX. Silahkan masuk ke dalam folder dimana kita akan menyimpan project-nya. Dan jalankan perintah berikut ini di dalam terminal/CMD :
npx create-nuxt-app@3.6.0 nuxt-crud
Perintah di atas digunakan untuk membuat project Nuxt Js baru dengan nama nuxt-crud. Jika keluar pilihan, bisa ikuti seperti berikut ini :
| PERINTAH |
AKSI |
| Project name: |
Tekan ENTER |
| Programming language: |
Pilih JavaScript dan ENTER |
| Package manager: |
Pilih Npm dan ENTER |
| UI framework: |
Pilih Bootstrap Vue dan ENTER |
| Nuxt.js modules: |
Pilih Axios dengan tekan SPACE, kemudian ENTER |
| Linting tools: |
Tekan ENTER |
| Testing framework: |
Pilih None dan ENTER |
| Rendering mode: |
Pilih Universal (SSR / SSG) dan ENTER |
| Deployment target: |
Pilih Server (Node.js hosting) dan ENTER |
| Development tools: |
Pilih jsconfig.json dengan tekan SPACE dan ENTER |
| What is your GitHub username? |
Tekan ENTER |
| Version control system: |
Pilih Git dan ENTER |
Setelah itu, silahkan tunggu proses installasi Nuxt Js sampai selesai, disini akan memakan waktu lebih lama jika sebelumnya belum pernah melakukan installasi Nuxt Js.
Langkah 3 - Menjalankan Nuxt Js
Setelah proses installasi selesai, sekarang kita lanjutkan untuk menjalankan project Nuxt Js kita. Silahkan jalankan perintah berikut ini :
cd nuxt-crud
Perintah cd di atas digunakan untuk masuk ke dalam folder nuxt-crud. Setelah itu, jalankan perintah berikut ini :
npm run dev
Silahkan tunggu proses compile sampai selesai dan jika sudah selsai, maka aplikasi Nuxt Js kita akan dijalankan menggunakan port 3000 di dalam localhost.
SIlahkan buka di browser dengan mengetikkan http://localhost:3000 jika berhasil, maka kuurang lebih seperti berikut ini :
Sampai disini artikel tentang installasi dan perispan membuat project di Nuxt Js, di artikel selanjutnya kita semua akan belajar bagaimana cara menampilkan data dari Rest API di dalam Nuxt Js.
Terima Kasih