Belajar Nuxt - Memulai Proyek Nuxt

#Pendahuluan

Teori arsitektur sudah cukup. Episode 3 adalah titik di mana kalian mulai membangun sesuatu yang nyata: project Nuxt pertama kalian. Tujuan episode ini sederhana tapi krusial — kalian harus nyaman dengan alur membuat project, memahami file apa saja yang ada, dan tahu cara menjalankan dev server beserta fitur hot reload.

Di episode ini kita juga menyiapkan dasar kualitas kode: TypeScript aktif, ESLint untuk melintas aturan, dan Prettier untuk merapikan format. Setup yang benar sejak awal jauh lebih murah daripada memperbaiki di tengah jalan.

#Membuat Aplikasi dengan npx nuxi init

#Perintah Pembuatan Project

Nuxi adalah command line interface resmi Nuxt. Untuk membuat project baru, jalankan:

npx nuxi@latest init belajar-shop
cd belajar-shop

Nuxi akan bertanya beberapa hal seperti package manager yang dipakai. Setelah selesai, install semua dependency:

npm install

Perintah npx nuxi init belajar-shop membuat folder belajar-shop berisi template project lengkap. Seluruh series ini kita akan mengembangkan project belajar-shop menjadi aplikasi toko online yang nyata.

#Alternatif: Nuxt Starter

Selain template dasar, kalian bisa memakai starter yang lebih lengkap seperti nuxt/starter atau nuxt/starter-v4. Untuk belajar, template dasar sudah paling tepat karena kita membangun semua fitur sendiri secara bertahap.

#Struktur Folder dan File Utama

Setelah instalasi selesai, buka project di editor dan amati isinya:

app/
  app.vue
  assets/
  components/
  composables/
  layouts/
  pages/
  public/
  server/
nuxt.config.ts
package.json
tsconfig.json

Beberapa file kunci yang perlu kalian kenali sejak sekarang:

• app/app.vue: komponen akar yang memuat <NuxtPage />.
• app/pages/index.vue: halaman pertama project.
• nuxt.config.ts: konfigurasi utama Nuxt.
• package.json: daftar dependency dan script seperti dev, build, dan preview.

Buka app/app.vue dan ganti isinya dengan versi sederhana:

app.vue sederhana

<template>
  <div>
    <NuxtPage />
  </div>
</template>

<NuxtPage /> adalah komponen khusus Nuxt yang merender halaman yang sedang aktif sesuai route. Tanpa komponen ini, halaman tidak akan pernah tampil.

#Menjalankan Dev Server dan Hot Reload

#Memulai Dev Server

Jalankan dev server dari folder project:

npm run dev

Dev server berjalan di http://localhost:3000. Buka URL tersebut di browser dan kalian akan melihat halaman selamat datang Nuxt. Status server juga muncul di terminal lengkap dengan informasi port dan versi.

#Hot Module Replacement

Keunggulan utama dev mode adalah hot module replacement. Ubah teks di app/pages/index.vue, simpan, dan perhatikan: perubahan langsung tampil di browser tanpa reload manual. State komponen yang tidak berubah juga dipertahankan. Cobalah sekarang dengan mengganti konten halaman utama.

#Nuxi DevTools

Nuxt DevTools terintegrasi dengan dev server. Buka http://localhost:3000/_nuxt/ atau klik ikon yang muncul di pojok browser saat dev server aktif. DevTools menampilkan komponen, state, route, hingga payload — akan kita pakai untuk profiling di episode 15.

#Konfigurasi TypeScript, ESLint, dan Prettier

#TypeScript Aktif Sejak Awal

Nuxt dilengkapi TypeScript secara default. Untuk memeriksa tipe seluruh project, jalankan:

npx nuxi typecheck

npx nuxi typecheck menjalankan vue-tsc dan melaporkan semua error tipe. Biarkan strict aktif di tsconfig.json — Nuxt mengelola file ini dan menambahkan alias seperti #imports dan @.

#ESLint dengan Module Resmi

Install module ESLint resmi Nuxt untuk integrasi terbaik:

npm install --save-dev @nuxt/eslint

Tambahkan module ke nuxt.config.ts:

Aktifkan ESLint

export default defineNuxtConfig({
  modules: ["@nuxt/eslint"],
})

Setelah itu file .eslintrc atau eslint.config.mjs dibangkitkan otomatis, dan kalian bisa menjalankan linting:

npx eslint .

#Prettier untuk Format Konsisten

Install Prettier dan jalankan untuk merapikan semua file:

npm install --save-dev prettier
npx prettier --write .

Kombinasi npx eslint . dan npx prettier --write . membuat codebase seragam. Episode 19 akan menambahkan pre-commit hooks sehingga aturan ini ditegakkan otomatis.

#Penutup

Episode 3 memindahkan kalian dari teori ke praktik: project belajar-shop sudah berdiri, kalian memahami struktur folder dan peran app.vue, dev server berjalan dengan hot reload, dan TypeScript, ESLint, serta Prettier sudah aktif sebagai jaring pengaman kualitas.

Inti yang harus dibawa pulang:

• Buat project baru dengan npx nuxi init lalu npm install.
• app.vue adalah komponen akar; <NuxtPage /> merender halaman aktif.
• npm run dev menjalankan dev server dengan hot module replacement.
• Nuxt DevTools tersedia selama dev untuk inspeksi komponen dan state.
• TypeScript sudah aktif; gunakan npx nuxi typecheck untuk memeriksa tipe.
• Integrasikan ESLint lewat @nuxt/eslint dan rapiakan format dengan Prettier.

Di episode 4 selanjutnya kita akan membahas routing dan navigation — file-based routing di folder pages, dynamic dan nested routes, navigasi dengan <NuxtLink>, serta middleware untuk menjaga rute. Project belajar-shop kalian akan mulai punya beberapa halaman.