Cara Install Nuxt.js Terbaru (Nuxt 4) untuk Pemula

Nuxt.js merupakan framework berbasis Vue.js yang dapat digunakan untuk membangun website dan aplikasi web modern. Nuxt menyediakan berbagai fitur yang membantu developer membangun aplikasi dengan lebih terstruktur, termasuk server-side rendering (SSR), routing berbasis file, auto-import, server API, serta sistem rendering yang fleksibel.

Bagi developer yang baru ingin memulai menggunakan Nuxt, langkah pertama yang perlu dilakukan adalah menyiapkan environment kemudian membuat project Nuxt baru.

Pada artikel ini, kita akan membahas cara install Nuxt.js terbaru atau Nuxt 4 dari awal, mulai dari mengecek Node.js, membuat project, menjalankan development server, hingga mengenal struktur project yang dihasilkan.

Catatan: Artikel ini menggunakan Nuxt 4. Dokumentasi resmi Nuxt saat artikel ini ditulis menunjukkan versi Nuxt 4.5.2 sebagai rilis terbaru. Nuxt 3 juga telah mencapai end of life pada 31 Juli 2026, sehingga project baru sebaiknya menggunakan Nuxt 4.

Apa Itu Nuxt.js?

Nuxt.js adalah framework yang dibangun di atas Vue.js untuk membuat aplikasi web dengan pendekatan yang lebih terstruktur.

Berbeda dengan menggunakan Vue.js secara langsung, Nuxt sudah menyediakan berbagai konvensi dan fitur yang umum dibutuhkan dalam pengembangan aplikasi modern.

Beberapa fitur yang tersedia antara lain:

• File-based routing.

• Server-side rendering.

• Static generation dan prerendering.

• Auto-import components dan composables.

• Server API menggunakan Nitro.

• Data fetching.

• Middleware.

• Layout.

• SEO dan metadata.

• Code splitting.

• Development tools.

• Dukungan TypeScript.

Nuxt juga menggunakan Nitro sebagai server engine sehingga aplikasi dapat dideploy ke berbagai jenis environment, termasuk Node.js server, static hosting, serverless, maupun edge environment.

Persiapan Sebelum Install Nuxt.js

Sebelum membuat project Nuxt, terdapat beberapa hal yang perlu dipersiapkan.

1. Node.js

Nuxt 4 membutuhkan Node.js 22.x atau lebih baru berdasarkan dokumentasi instalasi resmi Nuxt.

Dokumentasi Nuxt juga merekomendasikan penggunaan versi Node.js yang merupakan active LTS, dan menyarankan menggunakan versi genap seperti Node.js 22 atau 24.

Untuk memeriksa versi Node.js yang sudah terinstall, jalankan:

node -v

Contohnya:

v24.x.x

Anda juga dapat memeriksa versi npm:

npm -v

Jika Node.js belum terinstall, gunakan installer atau package manager resmi Node.js dan pilih versi LTS.

2. Code Editor

Anda dapat menggunakan code editor apa pun yang mendukung JavaScript dan Vue.

Salah satu pilihan yang populer adalah Visual Studio Code.

Untuk pengalaman development Nuxt yang lebih baik, dokumentasi resmi Nuxt merekomendasikan extension Vue resmi untuk VS Code.

3. Terminal

Anda membutuhkan terminal untuk menjalankan command Nuxt.

Pada Linux dan macOS dapat menggunakan terminal bawaan.

Pada Windows dapat menggunakan PowerShell, Command Prompt, atau terminal yang tersedia di Visual Studio Code.

Cara Install Nuxt.js Terbaru

Setelah Node.js tersedia, kita dapat membuat project Nuxt baru.

Nuxt menyediakan beberapa package manager, seperti:

• npm

• yarn

• pnpm

• bun

Pada tutorial ini kita menggunakan npm karena merupakan pilihan yang paling mudah untuk pemula.

Langkah 1 — Buat Project Nuxt

Buka terminal kemudian jalankan:

npm create nuxt@latest daily-big-boss

Perintah tersebut akan menggunakan Nuxt CLI untuk membuat project baru.

Anda dapat mengganti daily-big-boss dengan nama project yang diinginkan.

Contohnya:

npm create nuxt@latest my-nuxt-app

Dokumentasi resmi Nuxt menggunakan command npm create nuxt@latest <project-name> untuk membuat project baru.

Langkah 2 — Masuk ke Folder Project

Setelah proses pembuatan project selesai, masuk ke direktori project:

cd daily-big-boss

Jika nama project yang digunakan berbeda, sesuaikan dengan nama folder project Anda.

Langkah 3 — Install Dependency

Jika CLI belum melakukan proses instalasi dependency secara otomatis, jalankan:

npm install

Command tersebut akan membaca package.json kemudian menginstall dependency yang dibutuhkan oleh project.

Setelah selesai, project sudah siap dijalankan.

Langkah 4 — Jalankan Nuxt dalam Development Mode

Untuk menjalankan development server, gunakan:

npm run dev

Nuxt akan menjalankan development server dan biasanya tersedia melalui:

http://localhost:3000

Dokumentasi resmi Nuxt juga menyediakan command:

npm run dev -- -o

Opsi -o dapat digunakan agar browser dibuka secara otomatis.

Setelah server berjalan, buka:

http://localhost:3000

Jika halaman Nuxt muncul, berarti instalasi berhasil.

Langkah 5 — Memahami Struktur Project Nuxt 4

Setelah project berhasil dibuat, Anda akan menemukan beberapa direktori dan file penting.

Struktur sederhananya kurang lebih seperti:

daily-big-boss/
├── app/
│   ├── assets/
│   ├── components/
│   ├── layouts/
│   ├── middleware/
│   ├── pages/
│   └── app.vue
├── public/
├── server/
├── shared/
├── node_modules/
├── .gitignore
├── nuxt.config.ts
├── package.json
└── tsconfig.json

Struktur aktual dapat berbeda tergantung versi Nuxt dan pilihan yang dibuat ketika project dibuat.

Folder app/

Folder app menjadi lokasi utama aplikasi Nuxt.

Di dalamnya terdapat beberapa bagian penting seperti:

app/
├── components/
├── layouts/
├── middleware/
├── pages/
└── app.vue

app/pages/

Folder ini digunakan untuk membuat halaman aplikasi dan mendukung file-based routing.

Contohnya:

app/pages/
├── index.vue
├── about.vue
└── contact.vue

Maka route yang dihasilkan menjadi:

/
/about
/contact

Pendekatan ini membuat routing lebih sederhana karena developer tidak perlu membuat konfigurasi route secara manual untuk setiap halaman.

app/components/

Digunakan untuk menyimpan reusable Vue components.

Contohnya:

app/components/
├── Header.vue
├── Footer.vue
└── Button.vue

Nuxt mendukung auto-import component sehingga component dapat digunakan tanpa harus melakukan import secara manual pada banyak kasus.

app/layouts/

Digunakan untuk membuat layout aplikasi.

Misalnya:

app/layouts/
└── default.vue

Layout dapat digunakan untuk membuat struktur umum seperti:

• Header

• Navigation

• Sidebar

• Footer

app.vue

app.vue merupakan root component dari aplikasi Nuxt.

Untuk project sederhana, file ini dapat digunakan sebagai entry point utama aplikasi.

Langkah 6 — Membuat Halaman Pertama

Sekarang kita dapat membuat halaman sederhana.

Buat file:

app/pages/index.vue

Kemudian isi:

<template>
  <main>
    <h1>Hello Nuxt 4</h1>
    <p>Project Nuxt berhasil dibuat.</p>
  </main>
</template>

Simpan file tersebut.

Kemudian buka:

http://localhost:3000

Anda akan melihat:

Hello Nuxt 4
Project Nuxt berhasil dibuat.

Nuxt menggunakan file pada directory pages untuk menghasilkan route aplikasi.

Langkah 7 — Membuat Halaman Baru

Misalnya kita ingin membuat halaman About.

Buat:

app/pages/about.vue

Isi:

<template>
  <main>
    <h1>About</h1>
    <p>Ini adalah halaman About.</p>
  </main>
</template>

Kemudian buka:

http://localhost:3000/about

Nuxt akan otomatis mengenali halaman tersebut sebagai route /about.

Tidak perlu membuat konfigurasi router secara manual.

Langkah 8 — Membuat Dynamic Route

Nuxt juga mendukung dynamic routing.

Misalnya kita ingin membuat halaman detail artikel:

app/pages/articles/[slug].vue

Kemudian:

<script setup>
const route = useRoute()
</script>

<template>
  <main>
    <h1>Artikel</h1>

    <p>Slug: {{ route.params.slug }}</p>
  </main>
</template>

Sekarang URL seperti:

/articles/belajar-nuxt

akan menghasilkan parameter:

slug = belajar-nuxt

Fitur seperti ini sangat berguna untuk website artikel, blog, katalog, maupun aplikasi dengan halaman detail.

Langkah 9 — Menambahkan Component

Buat component:

app/components/AppHeader.vue

Contohnya:

<template>
  <header>
    <h1>Daily Big Boss</h1>
  </header>
</template>

Kemudian component dapat digunakan pada halaman:

<template>
  <div>
    <AppHeader />

    <main>
      <h1>Home</h1>
    </main>
  </div>
</template>

Nuxt menyediakan mekanisme auto-import untuk berbagai bagian framework sehingga struktur project dapat tetap sederhana.

Langkah 10 — Mengenal Folder public

Folder public digunakan untuk menyimpan asset statis yang ingin tersedia langsung melalui URL.

Contohnya:

public/
└── images/
    └── logo.png

File tersebut dapat diakses melalui:

/images/logo.png

Nuxt menjelaskan bahwa isi directory public disajikan langsung dari root URL aplikasi.

Hal ini cocok untuk asset seperti:

• favicon

• logo

• robots.txt

• gambar statis

• file publik lainnya

Langkah 11 — Mengenal nuxt.config.ts

File:

nuxt.config.ts

digunakan untuk melakukan konfigurasi aplikasi Nuxt.

Contoh sederhana:

export default defineNuxtConfig({
  devtools: {
    enabled: true,
  },
})

Pada project yang lebih kompleks, file ini dapat digunakan untuk konfigurasi:

• Modules

• Runtime Config

• SEO

• CSS

• DevTools

• TypeScript

• Route Rules

• Build configuration

• Nitro

• dan berbagai konfigurasi Nuxt lainnya.

Sebaiknya konfigurasi tetap dibuat minimal dan hanya menambahkan konfigurasi ketika memang diperlukan.

Langkah 12 — Build Project untuk Production

Setelah aplikasi selesai dikembangkan, project dapat di-build menggunakan:

npm run build

Nuxt kemudian akan menghasilkan output production.

Untuk deployment menggunakan Node.js server, output production berada di:

.output/

Nuxt menggunakan Nitro untuk menghasilkan server production yang dapat dijalankan pada environment Node.js.

Untuk menjalankan hasil build secara production:

NODE_ENV=production node .output/server/index.mjs

Secara default, server akan berjalan pada port:

3000

Perintah tersebut merupakan pola deployment Node.js yang didokumentasikan secara resmi oleh Nuxt.

Apakah Nuxt Bisa Digunakan di Shared Hosting?

Bisa, tetapi tergantung dukungan hosting terhadap Node.js.

Nuxt dapat dideploy dengan beberapa pendekatan, termasuk:

1. Node.js Server

Cocok jika hosting menyediakan:

• Node.js

• Process manager

• Environment variable

• Custom port atau reverse proxy

Ini merupakan pilihan yang cocok untuk aplikasi Nuxt SSR.

2. Static Hosting

Jika website tidak membutuhkan SSR pada setiap request, aplikasi dapat menggunakan prerendering/static generation.

Pendekatan ini memungkinkan hasil website disajikan sebagai file statis.

3. Serverless atau Edge

Nuxt juga mendukung deployment ke environment serverless dan edge melalui Nitro.

Pilihan deployment sebaiknya disesuaikan dengan kebutuhan aplikasi, traffic, fitur SSR, dan kemampuan hosting.

Nuxt 4 vs Nuxt 3, Mana yang Harus Digunakan?

Untuk project baru pada 2026, pilihan yang disarankan adalah Nuxt 4.

Nuxt 3 sudah mencapai end of life pada 31 Juli 2026, sehingga tidak lagi menerima bug fix maupun security patch reguler. Dokumentasi resmi Nuxt juga mengarahkan pengguna untuk melakukan upgrade ke Nuxt 4.

Jadi, jika Anda membuat project baru:

npm create nuxt@latest nama-project

gunakan Nuxt 4.

Jika Anda masih memiliki project Nuxt 3, sebaiknya mulai merencanakan migrasi daripada membuat project baru menggunakan Nuxt 3.

Apakah Harus Menggunakan TypeScript?

Tidak harus.

Nuxt mendukung JavaScript maupun TypeScript.

Jika ingin menggunakan JavaScript, Anda tetap dapat membuat component Vue menggunakan:

<script setup>
const message = 'Hello Nuxt'
</script>

Sedangkan jika menggunakan TypeScript:

<script setup lang="ts">
const message: string = 'Hello Nuxt'
</script>

Untuk project kecil, JavaScript dapat menjadi pilihan yang lebih sederhana.

Namun, untuk aplikasi skala menengah hingga besar, TypeScript dapat membantu meningkatkan type safety dan maintainability.

Tips Setelah Berhasil Install Nuxt

Setelah project berhasil dibuat, jangan langsung memasang terlalu banyak package.

Sebaiknya mulai dengan struktur dasar:

app/
├── components/
├── composables/
├── layouts/
├── middleware/
├── pages/
└── app.vue

server/
├── api/
├── middleware/
└── utils/

public/

shared/

Kemudian tambahkan module atau dependency berdasarkan kebutuhan aplikasi.

Contohnya:

• Authentication

• State management

• SEO

• Image optimization

• Internationalization

• API integration

• Analytics

• Testing

Pendekatan ini membantu menjaga dependency tetap terkendali dan mengurangi technical debt.

Kesimpulan

Cara install Nuxt.js terbaru sebenarnya cukup sederhana.

Secara garis besar, langkahnya adalah:

node -v

npm create nuxt@latest daily-big-boss

cd daily-big-boss

npm install

npm run dev

Kemudian buka:

http://localhost:3000

Untuk project baru pada 2026, gunakan Nuxt 4 karena Nuxt 3 telah mencapai end of life. Dokumentasi resmi saat artikel ini dibuat menunjukkan Nuxt 4.5.2 sebagai versi terbaru.

Setelah memahami instalasi dasar, langkah berikutnya adalah mempelajari struktur folder, routing, components, composables, data fetching, middleware, SEO, serta deployment Nuxt ke production.

Dengan memahami fondasi tersebut, Anda dapat mulai membangun website maupun aplikasi web menggunakan Nuxt dengan struktur yang lebih terorganisir dan scalable.