Belajar Nuxt - Tooling Modern & Build Automation

#Pendahuluan

Pengembang yang baik mendelegasikan pekerjaan berulang ke mesin. Episode 19 membahas tooling modern dan build automation di Nuxt: memanfaatkan CLI dan Vite sepenuhnya, mengetatkan TypeScript, membangun pipeline CI/CD, dan mengotomasi linting serta formatting sehingga kualitas dijamin setiap commit.

Episode ini menyatukan banyak hal yang sudah dibangun: ESLint dan Prettier dari episode 3, typecheck dari episode 16, dan test dari episode 16. Semua akan dirangkai menjadi pipeline yang berjalan otomatis.

#Nuxt CLI, Vite, dan Build Tooling

#Perintah Nuxi yang Wajib Dikenal

Nuxi menyediakan perintah inti yang akan kalian pakai setiap hari:

npx nuxi dev
npx nuxi build
npx nuxi preview
npx nuxi typecheck
npx nuxi analyze

nuxi dev menjalankan dev server, nuxi build membangun untuk produksi, nuxi preview menyalakan server untuk output build, sedangkan typecheck dan analyze memeriksa kode dan bundle. Script npm di package.json biasanya membungkus perintah ini.

#Vite sebagai Bundler

Nuxt memakai Vite sebagai bundler default. Vite memberi dev server yang cepat dan build yang optimal. Konfigurasi Vite tambahan bisa ditulis di nuxt.config.ts:

Opsi Vite di nuxt.config

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: { protocol: "ws" },
    },
    build: {
      target: "esnext",
    },
  },
})

Opsi vite.build.target mengatur versi target build — esnext memanfaatkan fitur JavaScript terbaru untuk browser modern.

#TypeScript Integration dan Strict Typing

#TypeScript Ketat di Seluruh Project

Nuxt sudah TypeScript-native. Aktifkan mode ketat dan pastikan file .vue ikut diperiksa:

npx nuxi typecheck

Tambahkan "strict": true di tsconfig.json jika belum aktif. Strict mode menangkap banyak bug potensial lebih awal — misalnya nilai null yang dipakai tanpa pengecekan.

#Typing untuk Auto-import

Nuxt membangkitkan deklarasi tipe untuk auto-import di .nuxt/imports.d.ts. Manfaatkan useFetch dan useAsyncData yang sudah memiliki generic typing:

Typed data fetching

interface Produk {
  id: string
  nama: string
  harga: number
}
 
const { data: produk } = await useFetch<Produk[]>("/api/produk")

useFetch<Produk[]>("/api/produk") memberi tahu TypeScript bentuk data yang diharapkan. Error akses field yang salah tertangkap saat mengetik, bukan saat aplikasi jalan di produksi.

#CI/CD Pipeline untuk Nuxt Apps

#Pipeline Dasar di GitHub Actions

Siapkan pipeline yang menjalankan typecheck, lint, dan test untuk setiap push:

.github/workflows/ci.yml

name: CI
on:
  push:
    branches: [main]
  pull_request:
 
jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm ci
      - run: npx nuxt typecheck
      - run: npx eslint .
      - run: npm test

Pipeline ini menjalankan typecheck, lint, dan unit test di setiap pull request. Menambahkan langkah npm run build memastikan project juga selalu bisa dibangun.

#Build dan Deploy Otomatis

Pipeline produksi menambahkan build dan deploy:

npm run build

Output build lalu di-deploy ke platform pilihan — detail deployment dibahas di episode 20. Kunci CI yang baik: setiap perubahan yang melewati pipeline adalah kandidat rilis yang aman.

#Linting, Formatting, dan Pre-commit Hooks

#Mengotomasi dengan pre-commit

Pastikan kode yang masuk sudah bersih dengan menjalankan lint dan format otomatis sebelum commit:

npm install --save-dev husky lint-staged
npx husky init

Lalu atur package.json:

lint-staged config

{
  "lint-staged": {
    "*.{js,ts,vue}": ["eslint --fix", "prettier --write"]
  }
}

lint-staged hanya memproses file yang berubah, jadi cepat. Dengan husky, perintah ini dijalankan sebelum setiap commit — kode jelek tidak akan pernah masuk ke repository.

#Alur yang Konsisten

Hasil akhirnya: dev menulis kode, pre-commit merapikan, CI memverifikasi, dan deploy terjadi otomatis setelah lolos. Kualitas menjadi bawaan sistem, bukan bergantung ingatan.

#Penutup

Episode 19 merangkai tooling kalian menjadi sistem: perintah nuxi dan Vite untuk build yang cepat, TypeScript ketat untuk keamanan tipe, pipeline CI/CD untuk verifikasi otomatis, serta husky dan lint-staged untuk menegakkan kualitas sebelum kode masuk repository.

Inti yang harus dibawa pulang:

• nuxi dev, build, preview, dan typecheck adalah perintah harian inti.
• Nuxt memakai Vite; opsi bundler diatur lewat nuxt.config.ts.
• Strict TypeScript menangkap bug lebih awal di seluruh project.
• CI pipeline menjalankan typecheck, lint, dan test di setiap PR.
• Build produksi wajib masuk pipeline agar selalu teruji.
• Husky dan lint-staged mengotomasi linting dan formatting sebelum commit.

Di episode 20 selanjutnya kita akan membahas deployment dan hosting — opsi deployment di Vercel, Netlify, Cloudflare, dan self-host, target deployment Nitro untuk serverless, pengelolaan build output dan caching, serta alur deployment yang siap produksi.