12 Langkah Cara Install Nuxt 3 dengan Vite

Macam mana nak install projek Nuxt JS? Ikuti 12 langkah mudah cara install Nuxt 3 di PC/laptop anda menggunakan Vite:

1. Pastikan kita sudah ada Terminal (macOS/Linux) atau gunakan Git Bash (Windows) untuk run command.

2. Lepas tu, kita perlukan NodeJS (run-time environment).
Boleh gunakan nvm (Node Version Manager) atau download installer Nodejs daripada laman web nodejs.org
Nodejs ni dah install sekali dengan npm (Node Package Manager) untuk kita install apa-apa npm package yang diperlukan.
Buka Terminal/CMD. Semak versi Node JS sama ada sudah tersedia di dalam laptop kita:

node -v && npm -v

3. Kemudian, kita boleh gunakan Visual Studio Code (atau apa-apa code editor) untuk edit source code di dalam projek Nuxt kita. Semak versi VS Code sama ada sudah tersedia di dalam laptop kita:

code -v

Dah ada 3 tool asas ni? Cukup!

Saya nak letak folder projek ni dalam Desktop dengan nama nuxt2024

4. Sekarang, kita akan gunakan Vite untuk install Nuxt. Buka terminal. Run command

npm create vite@latest nuxt2024

untuk download Nuxt 3.

5. Jika keluar prompt
Need to install the following packages: create-vite@[latest-version]
sebegini (untuk first time Vite user), taip ‘y’ untuk proceed.

6. Bila diminta untuk pilih framework, boleh pilih Vue

7. Kemudian kita diminta untuk pilih variant. Yang ini kita pilih Nuxt.

8. Jika keluar prompt
Need to install the following packages: nuxi@[latest-version]
sebegini (untuk first timer yang baru install Nuxt), taip ‘y’ untuk proceed.

9. Saya pilih npm untuk package manager. Boleh pilih mana-mana, ikut preference masing-masing.

10. Kalau nak track changes guna git (version control system), boleh klik Yes untuk initialize git repo.

11. Bila dah selesai muat turun & scaffolding, masuk ke folder nuxt2024 tersebut. Run

cd nuxt2024

Tak perlu run npm install, sebab nuxi dah tolong install-kan dependencies projek kita. Terus run:

npm run dev

untuk test dalam mode development.

12. Klik http://127.0.0.1:3000 (localhost, port 3000 – atau port lain yang available) dan lihat paparan utama projek Nuxt di web browser.

Siap! Sekarang kita boleh mulakan pembangunan aplikasi web menggunakan Nuxt framework.

Seterusnya, kita akan belajar mengenai struktur projek Nuxt yang sudah kita install. Nantikan entri akan datang!