Belajar Nuxt - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Nuxt! Series ini akan membawa kalian menguasai Nuxt — meta framework full-stack untuk Vue.js yang menggabungkan rendering di server, generasi halaman statis, server engine Nitro, dan ecosystem modules — dari fondasi konsep sampai production readiness. Total ada 24 episode yang tersusun dari enam fase.

Tapi sebelum menjalankan nuxi dan membuat project pertama, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat ini penting? Karena Nuxt bukan sekadar Vue biasa. Dia berjalan di server dan di browser sekaligus, punya konsep routing berbasis file, auto-import, dan server API. Kalau kalian belum paham dasar Vue 3 dan apa itu SSR, semua konsep berikutnya akan terasa membingungkan.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar terpenuhi, menyiapkan Node.js LTS, editor yang tepat, dan memverifikasi tooling Nuxt. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#HTML, CSS, dan JavaScript ES6+

Nuxt membangun UI di atas Vue, dan Vue membangun UI di atas tiga fondasi ini. Pastikan kalian nyaman dengan HTML semantik, CSS modern seperti Flexbox dan Grid, serta JavaScript modern ES6+: arrow function, destructuring, module import, promise, dan async await. Jika masih ragu, luangkan waktu untuk mengulang dasar-dasar ini sebelum lanjut.

#Vue 3 dan Composition API

Nuxt memakai Vue 3 sebagai jantungnya. Kalian wajib memahami sintaks Single File Component dengan <script setup>, template directives seperti v-if dan v-for, reactivity dengan ref dan computed, serta props dan emit. Pahami juga perbedaan Options API dan Composition API, karena seluruh codebase Nuxt modern memakai yang kedua.

Composition API di Nuxt

const nama = ref("Arman")
const sapaan = computed(() => `Halo, ${nama.value}`)

Setiap komponen Nuxt ditulis persis seperti komponen Vue di atas. ref("Arman") membungkus nilai menjadi reaktif, dan computed(() => ...) menghitung nilai turunan yang ikut bereaksi.

#Konsep SSR, SSG, dan SPA

Nuxt mendukung banyak mode rendering, dan episode 2 akan membahasnya detail. Untuk sekarang, pahami definisi singkatnya:

• SSR: HTML dirender di server lalu dikirim ke browser, JavaScript lalu menghidupkan interaktivitas.
• SSG: seluruh halaman dirender menjadi file HTML statis saat build.
• SPA: aplikasi dirender sepenuhnya di browser seperti Vue murni.

Konsep ini menentukan di mana kode kalian berjalan, jadi pastikan paham dulu garis besarnya.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js LTS dan Package Manager

Nuxt 4 membutuhkan Node.js versi 20.19 atau 22.12 ke atas. Rekomendasi terbaik adalah memakai versi LTS terbaru. Cara paling mudah mengelolanya adalah dengan nvm agar bisa berpindah versi:

nvm install --lts
nvm use --lts
node --version
npm --version

Output node --version harus menunjukkan versi 20.19 atau lebih baru. Package manager apa pun bisa dipakai — npm, yarn, pnpm, atau bun. Series ini memakai npm supaya konsisten.

#VS Code, Volar, dan Ekstensi Nuxt

Editor terbaik untuk Nuxt adalah VS Code. Install ekstensi Vue - Official yang dulu bernama Volar agar syntax highlighting, IntelliSense, dan type-checking file .vue bekerja benar. Nuxt juga merekomendasikan ekstensi Nuxtr yang menambahkan code snippets dan integrasi Nuxt DevTools.

code --install-extension Vue.volar
code --install-extension Nuxtr.nuxt-vscode-extensions

Perintah code --install-extension Vue.volar menginstall ekstensi dari command line. Alternatifnya, buka menu ekstensi di VS Code lalu cari nama yang sama.

#Browser Modern dan Spesifikasi Perangkat

Gunakan browser terbaru seperti Chrome, Firefox, atau Edge untuk development. Browser menyediakan DevTools yang wajib untuk debugging — episode 15 akan menggunakannya untuk profiling performa. Untuk spesifikasi perangkat, Nuxt membangun project dan menjalankan dev server secara bersamaan, jadi minimal 8GB RAM direkomendasikan agar proses Vite dan Nitro tidak melambat.

#Verifikasi Tooling Nuxt

Setelah semua terpasang, verifikasi lingkungan dengan memanggil CLI Nuxt. Sejak versi terbaru, tidak perlu menginstall Nuxt secara global — nuxi dipanggil melalui npm:

npm view nuxt version
npm view nuxi version

Jika perintah di atas berjalan tanpa error, berarti registry npm bisa diakses dan tooling siap. Sebagai uji terakhir, buat project pertama yang ringan. Episode 3 akan membahas ini mendalam, tapi pastikan sekarang perintahnya tidak gagal:

npx nuxi@latest init uji-project
cd uji-project
npm install
npm run dev

Jika browser membuka http://localhost:3000 dan menampilkan halaman selamat datang Nuxt, environment kalian sudah 100 persen siap. Untuk menghentikan dev server, tekan Ctrl + C di terminal.

#Ringkasan Skill yang Harus Dikuasai

Rangkuman prasyarat yang sudah kalian siapkan di episode 0:

• JavaScript ES6+ dan Vue 3 dengan Composition API sebagai dasar.
• Konsep SSR, SSG, dan SPA — kapan halaman dirender di server atau browser.
• Node.js LTS versi 20.19 atau 22.12 ke atas dengan nvm.
• VS Code dengan ekstensi Vue Official dan Nuxtr.
• Browser modern dan perangkat dengan minimal 8GB RAM.
• nuxi siap dipanggil dan project percobaan pertama berhasil berjalan.

Jika ada yang belum terpenuhi, berhenti dulu dan lengkapi sebelum melanjutkan. Fondasi yang kuat akan membuat 23 episode berikutnya terasa jauh lebih ringan.

#Penutup

Di episode 0 ini kalian sudah menyiapkan pijakan untuk seluruh series: memahami skill dasar JavaScript, Vue 3, dan mode rendering, menyiapkan Node.js LTS, menginstall ekstensi VS Code yang tepat, dan memverifikasi tooling Nuxt lewat project percobaan pertama.

Inti yang harus dibawa pulang:

• Kuasai Vue 3 dan Composition API sebelum masuk lebih dalam ke Nuxt.
• Pahami perbedaan SSR, SSG, dan SPA karena menentukan arsitektur aplikasi.
• Pakai nvm agar versi Node.js mudah dikelola dan selalu di LTS.
• Install ekstensi Vue Official dan Nuxtr di VS Code.
• Verifikasi tooling dengan mengecek versi Nuxt dan menjalankan project uji.
• Gunakan perangkat dengan minimal 8GB RAM untuk kenyamanan development.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan Nuxt — evolusinya dari Vue v2 ke Nuxt 3 lalu Nuxt 4, masalah full-stack yang diselesaikan, serta perbandingannya dengan Vue SPA manual dan Next.js. Pastikan environment kalian sudah siap, karena perjalanan Belajar Nuxt baru saja dimulai!