Tutorial CRUD Laravel dan Nuxt Js #3 : Installasi dan Persiapan Nuxt Js


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial CRUD Laravel dan Nuxt Js #3 : Installasi dan Persiapan Nuxt Js

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



Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami