Cara Membuat Website dengan Nuxt.js: Panduan Lengkap untuk Pemula 2026

Pendahuluan: Mengapa Belajar Cara Membuat Website dengan Nuxt.js?

Cara membuat website dengan Nuxt.js adalah topik yang semakin populer di kalangan developer Indonesia. Nuxt.js adalah framework full-stack berbasis Vue.js yang memberikan semua yang Anda butuhkan untuk membangun website modern yang cepat dan SEO-friendly - mulai dari Server-Side Rendering (SSR), Static Site Generation (SSG), hingga file-based routing otomatis.

Jika Anda sudah mengenal Vue.js, belajar Nuxt.js adalah langkah alami selanjutnya. Nuxt melakukan banyak hal secara otomatis yang biasanya memerlukan konfigurasi manual di Vue biasa: routing, SEO meta tags, code splitting, optimasi performa, dan bahkan server-side logic. Dengan kata lain, Nuxt.js adalah untuk Vue apa Next.js untuk React - sebuah framework yang membawa Vue ke level production yang sesungguhnya.

Dalam panduan lengkap ini, Anda akan belajar cara membuat website dengan Nuxt.js dari nol: mulai dari instalasi environment, memahami sistem routing berbasis file, mengelola state, fetching data dari API, optimasi SEO, hingga men-deploy website ke hosting. Mari mulai!

Mengapa Memilih Nuxt.js daripada Vue Biasa?

Sebelum masuk ke tutorial, penting memahami keunggulan Nuxt.js dibanding Vue.js murni:

• SEO Lebih Baik - Nuxt mendukung SSR dan SSG sehingga konten dirender di server. Google bisa mengindeks halaman Anda dengan sempurna, berbeda dari Vue SPA biasa.
• Routing Otomatis - Tidak perlu konfigurasi Vue Router secara manual. Cukup buat file di folder pages/ dan routing terbentuk otomatis.
• Auto-imports - Komponen, composables, dan utilitas di-import otomatis tanpa perlu menulis statement import secara manual.
• SEO dan Meta Tags - API useSeoMeta dan useHead memudahkan pengelolaan meta tags untuk setiap halaman.
• Performa Optimal - Code splitting otomatis, lazy loading, dan optimasi bundle sudah dikerjakan Nuxt tanpa perlu konfigurasi manual.
• Full-Stack dalam Satu Proyek - Nuxt mendukung server-side logic melalui Server Routes, sehingga bisa membuat API endpoint di proyek yang sama.

Prasyarat Sebelum Belajar Nuxt.js

Untuk mengikuti panduan ini secara optimal, Anda sebaiknya sudah memahami:

• HTML dan CSS dasar - struktur halaman, flexbox, grid, responsiveness
• JavaScript ES6+ - arrow function, destructuring, async/await, module import/export
• Dasar Vue.js - Composition API (ref, reactive, computed), Single File Components, direktif (v-for, v-if, v-model)

Jika belum familiar dengan Vue.js, pelajari Vue dasar selama 3-4 minggu terlebih dahulu sebelum beralih ke Nuxt. Dengan fondasi Vue yang kuat, Nuxt akan terasa sangat intuitif karena Nuxt pada dasarnya adalah Vue dengan banyak "baterai sudah termasuk".

Langkah 1: Menyiapkan Environment Development

Install Node.js

Nuxt 3 memerlukan Node.js versi 18.0 atau lebih baru. Kunjungi nodejs.org dan unduh versi LTS terbaru, lalu verifikasi instalasi:

node --version   # v22.x.x atau lebih baru
npm --version    # 10.x.x

Setup VS Code untuk Nuxt.js

Pasang ekstensi berikut di Visual Studio Code:

• Vue - Official (Volar) - ekstensi resmi Vue 3, wajib ada
• Nuxt Snippets - shortcut komponen dan composables Nuxt
• Tailwind CSS IntelliSense - autocomplete class Tailwind
• Prettier - Code formatter - format kode otomatis
• ESLint - deteksi error dan konsistensi kode

Langkah 2: Membuat Proyek Nuxt Baru

Gunakan perintah resmi untuk membuat proyek Nuxt baru:

npx nuxi@latest init nama-website-anda

Anda akan ditanya paket manager mana yang ingin digunakan (npm, pnpm, atau yarn). Pilih npm untuk konsistensi dengan tutorial ini. Setelah selesai:

cd nama-website-anda
npm install
npm run dev

Buka http://localhost:3000 di browser - website Nuxt Anda sudah berjalan!

Menambahkan Tailwind CSS

Nuxt memiliki sistem modul yang membuat integrasi library pihak ketiga sangat mudah:

npm install -D @nuxtjs/tailwindcss

Tambahkan modul ke nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss"],
  compatibilityDate: "2026-01-01",
});

Inisialisasi konfigurasi Tailwind:

npx tailwindcss init

Memahami Struktur Folder Nuxt

nama-website-anda/
├── public/           ← file publik (favicon, robots.txt)
├── assets/           ← aset yang diproses webpack/vite (CSS, font)
├── components/       ← komponen Vue yang di-import otomatis
├── composables/      ← composables yang di-import otomatis
├── layouts/          ← template layout halaman
├── middleware/       ← route middleware
├── pages/            ← halaman website (routing otomatis)
├── plugins/          ← plugin yang dijalankan saat startup
├── server/
│   ├── api/          ← endpoint API server
│   └── routes/       ← server-side routes
├── app.vue           ← komponen root
├── nuxt.config.ts    ← konfigurasi Nuxt
└── package.json

Langkah 3: File-Based Routing - Routing Otomatis

Fitur paling nyaman Nuxt adalah routing otomatis. Setiap file .vue di dalam folder pages/ secara otomatis menjadi sebuah URL - tidak perlu konfigurasi router sama sekali.

Membuat Halaman-Halaman Website

Buat beberapa file di folder pages/:

<!-- pages/index.vue - halaman beranda (/) -->
<script setup lang="ts">
useSeoMeta({
  title: "Beranda - Nama Website",
  description: "Selamat datang di website kami.",
  ogTitle: "Beranda - Nama Website",
  ogDescription: "Selamat datang di website kami.",
  ogUrl: "https://namawebsite.com",
});
</script>

<template>
  <main>
    <section class="py-20 text-center">
      <h1 class="text-5xl font-bold mb-6">Selamat Datang</h1>
      <p class="text-xl text-gray-600 mb-8">
        Kami membantu bisnis Anda berkembang di era digital.
      </p>
      <NuxtLink
        to="/kontak"
        class="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700"
      >
        Hubungi Kami
      </NuxtLink>
    </section>
  </main>
</template>

<!-- pages/tentang.vue - halaman /tentang -->
<script setup lang="ts">
useSeoMeta({
  title: "Tentang Kami",
  description: "Pelajari lebih lanjut tentang tim dan visi kami.",
});
</script>

<template>
  <main class="container mx-auto px-4 py-16 max-w-3xl">
    <h1 class="text-4xl font-bold mb-6">Tentang Kami</h1>
    <p class="text-lg text-gray-600 leading-relaxed">
      Kami adalah tim developer yang bersemangat membangun
      solusi digital terbaik untuk bisnis Indonesia.
    </p>
  </main>
</template>

Halaman Dinamis (Dynamic Routes)

Untuk halaman detail blog, produk, atau konten lain yang memiliki URL dinamis, gunakan nama file dengan kurung siku:

<!-- pages/blog/[slug].vue - halaman /blog/nama-artikel -->
<script setup lang="ts">
const route = useRoute();
const slug = route.params.slug as string;

const { data: artikel, error } = await useFetch("/api/blog/" + slug);

if (!artikel.value) {
  throw createError({ statusCode: 404, message: "Artikel tidak ditemukan" });
}

useSeoMeta({
  title: () => artikel.value?.title ?? "Artikel",
  description: () => artikel.value?.excerpt ?? "",
  ogTitle: () => artikel.value?.title ?? "Artikel",
});
</script>

<template>
  <article class="container mx-auto px-4 py-16 max-w-3xl">
    <h1 class="text-4xl font-bold mb-4">{{ artikel?.title }}</h1>
    <p class="text-gray-500 mb-8">{{ artikel?.date }}</p>
    <div
      class="prose prose-lg"
      v-html="artikel?.content"
    />
  </article>
</template>

Langkah 4: Layouts - Template Tampilan Halaman

Nuxt mendukung sistem Layouts untuk mendefinisikan template tampilan yang bisa digunakan oleh beberapa halaman sekaligus. Layout default otomatis diterapkan ke semua halaman.

<!-- layouts/default.vue - layout default semua halaman -->
<template>
  <div class="min-h-screen flex flex-col">
    <header class="border-b bg-white sticky top-0 z-50">
      <nav class="container mx-auto px-4 h-16 flex items-center justify-between">
        <NuxtLink to="/" class="text-xl font-bold text-blue-600">
          NamaWebsite
        </NuxtLink>
        <ul class="flex items-center gap-6">
          <li>
            <NuxtLink to="/" class="hover:text-blue-600" active-class="text-blue-600 font-medium">
              Beranda
            </NuxtLink>
          </li>
          <li>
            <NuxtLink to="/tentang" class="hover:text-blue-600" active-class="text-blue-600 font-medium">
              Tentang
            </NuxtLink>
          </li>
          <li>
            <NuxtLink to="/blog" class="hover:text-blue-600" active-class="text-blue-600 font-medium">
              Blog
            </NuxtLink>
          </li>
          <li>
            <NuxtLink
              to="/kontak"
              class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
            >
              Kontak
            </NuxtLink>
          </li>
        </ul>
      </nav>
    </header>

    <main class="flex-1">
      <slot />  <!-- konten halaman dirender di sini -->
    </main>

    <footer class="border-t py-8 text-center text-gray-500">
      <p>&copy; {{ new Date().getFullYear() }} NamaWebsite. All rights reserved.</p>
    </footer>
  </div>
</template>

Langkah 5: Komponen dan Auto-Imports

Salah satu fitur terfavorit developer Nuxt adalah auto-imports. Komponen di folder components/ dan composables di folder composables/ di-import otomatis - tidak perlu menulis import secara manual.

Membuat Komponen Reusable

<!-- components/KartuArtikel.vue -->
<script setup lang="ts">
interface Props {
  judul: string;
  excerpt: string;
  slug: string;
  tanggal: string;
  kategori: string;
}

defineProps<Props>();
</script>

<template>
  <article class="border rounded-xl p-6 hover:shadow-md transition-shadow">
    <span class="text-sm text-blue-600 font-medium">{{ kategori }}</span>
    <h2 class="text-xl font-bold mt-2 mb-3 line-clamp-2">
      <NuxtLink :to="'/blog/' + slug" class="hover:text-blue-600">
        {{ judul }}
      </NuxtLink>
    </h2>
    <p class="text-gray-600 line-clamp-3 mb-4">{{ excerpt }}</p>
    <div class="flex items-center justify-between">
      <span class="text-sm text-gray-400">{{ tanggal }}</span>
      <NuxtLink
        :to="'/blog/' + slug"
        class="text-blue-600 text-sm font-medium hover:underline"
      >
        Baca Selengkapnya →
      </NuxtLink>
    </div>
  </article>
</template>

Gunakan komponen ini di halaman tanpa perlu import:

<!-- pages/blog/index.vue -->
<script setup lang="ts">
const { data: artikelList } = await useFetch("/api/blog");
</script>

<template>
  <main class="container mx-auto px-4 py-16">
    <h1 class="text-4xl font-bold mb-10">Blog</h1>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- KartuArtikel di-import otomatis oleh Nuxt -->
      <KartuArtikel
        v-for="artikel in artikelList"
        :key="artikel.slug"
        v-bind="artikel"
      />
    </div>
  </main>
</template>

Langkah 6: Data Fetching dengan useFetch dan useAsyncData

Nuxt menyediakan composables bawaan untuk fetching data yang bekerja dengan baik baik di server maupun client, mendukung caching otomatis, dan terintegrasi dengan sistem SSR Nuxt.

useFetch - Cara Termudah

<script setup lang="ts">
// Fetch data dari API eksternal
const { data, pending, error, refresh } = await useFetch(
  "https://api.contoh.com/produk",
  {
    // Cache data selama 60 detik
    getCachedData: (key, nuxtApp) =>
      nuxtApp.payload.data[key] ?? nuxtApp.static.data[key],
    // Transform data sebelum digunakan
    transform: (response: { data: Produk[] }) => response.data,
  }
);

interface Produk {
  id: number;
  nama: string;
  harga: number;
  slug: string;
}
</script>

<template>
  <div>
    <div v-if="pending">Memuat data...</div>
    <div v-else-if="error">Gagal memuat: {{ error.message }}</div>
    <ul v-else>
      <li v-for="produk in data" :key="produk.id">
        {{ produk.nama }} - Rp {{ produk.harga.toLocaleString("id-ID") }}
      </li>
    </ul>
    <button @click="refresh()">Muat Ulang</button>
  </div>
</template>

useAsyncData - Untuk Logika yang Lebih Kompleks

<script setup lang="ts">
const route = useRoute();

const { data: profil } = await useAsyncData(
  "profil-" + route.params.username,  // key unik untuk cache
  async () => {
    // Bisa panggil beberapa API sekaligus
    const [user, postingan] = await Promise.all([
      $fetch("/api/users/" + route.params.username),
      $fetch("/api/posts?author=" + route.params.username),
    ]);
    return { user, postingan };
  }
);
</script>

Langkah 7: Server Routes - API Endpoint Bawaan

Nuxt memungkinkan Anda membuat API endpoint di folder server/api/ tanpa perlu setup backend terpisah. Ini sangat berguna untuk form handling, data processing, atau berkomunikasi dengan database:

// server/api/kontak.post.ts - endpoint POST /api/kontak
import { readBody, createError } from "h3";

export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  const { nama, email, pesan } = body;

  if (!nama || !email || !pesan) {
    throw createError({
      statusCode: 400,
      message: "Semua field wajib diisi.",
    });
  }

  // Di sini bisa simpan ke database, kirim email, dll.
  console.log("Pesan baru:", { nama, email, pesan });

  return {
    success: true,
    message: "Pesan berhasil dikirim! Kami akan menghubungi Anda segera.",
  };
});

// server/api/blog/index.get.ts - endpoint GET /api/blog
export default defineEventHandler(async () => {
  // Simulasi data dari database
  return [
    {
      slug: "panduan-seo-2026",
      judul: "Panduan SEO Lengkap untuk Website di 2026",
      excerpt: "Pelajari strategi SEO terkini untuk meningkatkan ranking website Anda.",
      tanggal: "28 Mei 2026",
      kategori: "SEO",
    },
    {
      slug: "cara-setup-vps",
      judul: "Cara Setup VPS untuk Pemula",
      excerpt: "Tutorial lengkap konfigurasi VPS Ubuntu dari awal hingga production.",
      tanggal: "25 Mei 2026",
      kategori: "Server",
    },
  ];
});

Langkah 8: Optimasi SEO dengan useSeoMeta dan useHead

Nuxt menyediakan composables bawaan yang sangat nyaman untuk mengelola SEO:

<script setup lang="ts">
// useSeoMeta - cara termudah untuk common meta tags
useSeoMeta({
  title: "Judul Halaman | Nama Website",
  description: "Deskripsi halaman untuk SEO dan preview media sosial.",
  ogTitle: "Judul untuk Open Graph (Facebook, LinkedIn)",
  ogDescription: "Deskripsi untuk Open Graph.",
  ogUrl: "https://namawebsite.com/halaman-ini",
  ogType: "website",
  twitterCard: "summary_large_image",
  twitterTitle: "Judul untuk Twitter/X Card",
  twitterDescription: "Deskripsi untuk Twitter Card.",
});

// useHead - untuk elemen head yang lebih fleksibel
useHead({
  htmlAttrs: { lang: "id" },
  link: [
    { rel: "canonical", href: "https://namawebsite.com/halaman-ini" },
  ],
  script: [
    {
      type: "application/ld+json",
      innerHTML: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "WebSite",
        name: "Nama Website",
        url: "https://namawebsite.com",
      }),
    },
  ],
});
</script>

Konfigurasi SEO Global di nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss"],

  // SEO default untuk semua halaman
  app: {
    head: {
      htmlAttrs: { lang: "id" },
      charset: "utf-8",
      viewport: "width=device-width, initial-scale=1",
      meta: [
        { name: "robots", content: "index, follow" },
        { name: "author", content: "Nama Website" },
        { property: "og:site_name", content: "Nama Website" },
        { property: "og:locale", content: "id_ID" },
      ],
      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
    },
  },

  // Konfigurasi render untuk SSR
  ssr: true,

  compatibilityDate: "2026-01-01",
});

Langkah 9: State Management dengan useState

Untuk state yang perlu dibagikan antar komponen tanpa library tambahan, Nuxt menyediakan composable useState bawaan yang bekerja dengan SSR:

// composables/useKeranjang.ts - composable untuk state keranjang belanja
interface ItemKeranjang {
  id: number;
  nama: string;
  harga: number;
  jumlah: number;
}

export function useKeranjang() {
  const items = useState<ItemKeranjang[]>("keranjang", () => []);

  const total = computed(() =>
    items.value.reduce((sum, item) => sum + item.harga * item.jumlah, 0)
  );

  const jumlahItem = computed(() =>
    items.value.reduce((sum, item) => sum + item.jumlah, 0)
  );

  function tambahItem(produk: Omit<ItemKeranjang, "jumlah">) {
    const existing = items.value.find((i) => i.id === produk.id);
    if (existing) {
      existing.jumlah++;
    } else {
      items.value.push({ ...produk, jumlah: 1 });
    }
  }

  function hapusItem(id: number) {
    items.value = items.value.filter((i) => i.id !== id);
  }

  return { items, total, jumlahItem, tambahItem, hapusItem };
}

Gunakan di komponen mana pun (auto-imported karena ada di folder composables/):

<script setup lang="ts">
const { jumlahItem, total } = useKeranjang();
</script>

<template>
  <div>
    <span>Keranjang ({{ jumlahItem }} item)</span>
    <span>Total: Rp {{ total.toLocaleString("id-ID") }}</span>
  </div>
</template>

Langkah 10: Build dan Deploy Website Nuxt

Mode Render Nuxt

Nuxt mendukung beberapa mode render - pilih sesuai kebutuhan website Anda:

• SSR (Universal Rendering) - default, cocok untuk website dinamis yang butuh SEO maksimal. Memerlukan Node.js server.
• SSG (Static Site Generation) - pre-render semua halaman saat build, output berupa file statis. Cocok untuk blog atau landing page. Bisa di-host di shared hosting biasa.
• SPA (Single Page Application) - render di client. Cocok untuk aplikasi yang tidak butuh SEO. Bisa di-host di shared hosting biasa.

Build untuk SSR (Production dengan Node.js)

# Build Nuxt untuk SSR
npm run build

# Folder output: .output/
# Jalankan server production:
node .output/server/index.mjs

Build untuk Static Site (Tanpa Server)

# Pre-render semua halaman menjadi file statis
npm run generate

# Folder output: .output/public/
# Upload isi folder ini ke shared hosting

Deploy ke Hosting Node.js atau VPS

# Di VPS Ubuntu - install Node.js dan PM2
curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
apt install -y nodejs
npm install -g pm2

# Clone repo dan build
git clone https://github.com/username/nuxt-app.git /var/www/nuxt-app
cd /var/www/nuxt-app
npm ci
npm run build

# Jalankan dengan PM2
pm2 start .output/server/index.mjs --name "nuxt-app"
pm2 save && pm2 startup

Deploy ke Vercel

1. Push kode ke GitHub
2. Login ke vercel.com dengan akun GitHub
3. Klik "New Project" dan import repository Nuxt Anda
4. Vercel otomatis mendeteksi Nuxt dan mengatur build settings
5. Klik "Deploy" - selesai!

Vercel mendukung Nuxt dengan baik melalui integrasi resmi. Semua fitur termasuk SSR, API Routes, dan ISR didukung penuh.

Deploy Static ke Shared Hosting (cPanel)

1. Jalankan npm run generate untuk membuat file statis
2. Login ke cPanel hosting Anda
3. Buka File Manager, navigasi ke public_html/
4. Upload seluruh isi folder .output/public/
5. Buat file .htaccess untuk SPA routing:

   Options -MultiViews
   RewriteEngine On
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule ^ /index.html [QSA,L]

FAQ: Cara Membuat Website dengan Nuxt.js

Kesimpulan

Belajar cara membuat website dengan Nuxt.js adalah pilihan yang sangat tepat bagi developer Vue yang ingin membangun website production-ready dengan SEO optimal. Nuxt menyederhanakan banyak aspek kompleks dari web development modern - routing otomatis, auto-imports, SSR yang mulus, API Routes bawaan, dan optimasi SEO yang komprehensif - semua dalam satu framework yang terasa alami bagi pengguna Vue.

Perjalanan belajar Nuxt dimulai dari memahami file-based routing dan sistem halaman, lalu berlanjut ke layouts untuk konsistensi tampilan, data fetching dengan useFetch, state management dengan useState, hingga Server Routes untuk logic backend. Setiap fitur dirancang untuk bekerja harmonis satu sama lain - inilah yang membuat Nuxt menjadi framework yang sangat produktif.

Ketika website Nuxt Anda siap dipublikasikan, pilihan hosting bergantung pada mode render yang digunakan. Untuk website statis atau blog, manfaatkan npm run generate dan upload ke shared hosting Indonesia yang terjangkau. Untuk website bisnis dinamis yang butuh SSR penuh, deploy ke Vercel untuk kemudahan atau VPS untuk kontrol dan biaya yang lebih terprediktabel. Dengan hosting yang tepat, website Nuxt.js Anda akan berjalan cepat, terindeks sempurna oleh Google, dan siap melayani pelanggan Anda di seluruh Indonesia.