Nuxt.js: Vue Full-Stack Framework

# Membuat proyek Nuxt baru dengan npx
npx nuxi@latest init nuxt-app

# Atau dengan pnpm
pnpm dlx nuxi@latest init nuxt-app

# Masuk ke direktori
cd nuxt-app

# Install dependencies
npm install

# Jalankan development server
npm run dev

# Output:
#   Nuxt 3.x.x with Nitro
#   ➜ Local:   http://localhost:3000/

nuxt-app/
├── .nuxt/                ← Generated (auto)
├── assets/               ← CSS, fonts, images (processed)
├── components/           ← Vue components (auto-imported)
│   ├── AppHeader.vue
│   ├── AppFooter.vue
│   └── UserCard.vue
├── composables/          ← Composables (auto-imported)
│   └── useAuth.js
├── layouts/              ← Layout components
│   └── default.vue
├── middleware/           ← Route middleware
│   └── auth.js
├── pages/                ← File-based routing
│   ├── index.vue         ← /
│   ├── about.vue         ← /about
│   └── blog/
│       ├── index.vue     ← /blog
│       └── [id].vue      ← /blog/:id
├── plugins/              ← Vue plugins
├── public/               ← Static files (tidak diproses)
│   └── favicon.ico
├── server/               ← Server-side code
│   ├── api/
│   │   └── hello.js      ← /api/hello
│   ├── middleware/
│   └── utils/
├── app.vue               ← Root component
├── nuxt.config.ts        ← Konfigurasi Nuxt
├── package.json
└── tsconfig.json

// nuxt.config.ts
export default defineNuxtConfig({
  // Meta tags global untuk SEO
  app: {
    head: {
      title: 'BeebaneLabs - Tutorial Web Development',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'description', content: 'Tutorial web development modern' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    }
  },

  // CSS global
  css: ['~/assets/css/main.css'],

  // Modul yang digunakan
  modules: [
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss',
    '@nuxt/image'
  ],

  // Konfigurasi development
  devtools: { enabled: true }
})

pages/
├── index.vue              →  /
├── about.vue              →  /about
├── contact.vue            →  /contact
├── blog/
│   ├── index.vue          →  /blog
│   ├── [slug].vue         →  /blog/:slug  (dynamic)
│   └── [...slug].vue      →  /blog/*      (catch-all)
├── user/
│   ├── [id].vue           →  /user/:id
│   └── [id]/
│       ├── index.vue      →  /user/:id
│       ├── posts.vue      →  /user/:id/posts
│       └── settings.vue   →  /user/:id/settings
└── products/
    └── [[category]].vue   →  /products atau /products/:category
                                (opsional parameter)

<template>
  <div class="blog-post">
    <h1>{{ post.title }}</h1>
    <p class="meta">Ditulis oleh {{ post.author }} · {{ post.date }}</p>
    <div class="content" v-html="post.content" />
  </div>
</template>

<script setup>
// useRoute() untuk mengakses parameter URL
const route = useRoute()
const slug = route.params.slug

// useFetch() — composable bawaan Nuxt untuk data fetching
const { data: post, error } = await useFetch(`/api/posts/${slug}`)

// Jika post tidak ditemukan, tampilkan error 404
if (error.value) {
  throw createError({
    statusCode: 404,
    statusMessage: 'Artikel tidak ditemukan'
  })
}

// Dynamic meta tags untuk SEO
useHead({
  title: post.value?.title,
  meta: [
    { name: 'description', content: post.value?.excerpt }
  ]
})
</script>

<template>
  <nav>
    <!-- NuxtLink menggantikan <a> tag, memberikan SPA navigation -->
    <NuxtLink to="/">Beranda</NuxtLink>
    <NuxtLink to="/blog">Blog</NuxtLink>
    <NuxtLink to="/about">Tentang</NuxtLink>

    <!-- Dynamic link -->
    <NuxtLink :to="`/blog/${post.slug}`">
      {{ post.title }}
    </NuxtLink>

    <!-- External link -->
    <NuxtLink to="https://github.com" external>
      GitHub
    </NuxtLink>

    <!-- Prefetching (default aktif) -->
    <NuxtLink to="/products" no-prefetch>
      Produk (tanpa prefetch)
    </NuxtLink>
  </nav>
</template>

<template>
  <div class="user-profile">
    <h1>Profil: {{ user.name }}</h1>

    <nav class="user-tabs">
      <NuxtLink :to="`/user/${user.id}`">Overview</NuxtLink>
      <NuxtLink :to="`/user/${user.id}/posts`">Postingan</NuxtLink>
      <NuxtLink :to="`/user/${user.id}/settings`">Pengaturan</NuxtLink>
    </nav>

    <!-- NuxtPage merender child routes di sini -->
    <NuxtPage />
  </div>
</template>

<script setup>
const route = useRoute()
const { data: user } = await useFetch(`/api/users/${route.params.id}`)
</script>

1. Browser mengirim request → GET /blog/my-post
2. Server (Nitro) menerima request
3. Nuxt menjalankan lifecycle:
   a. Middleware server (server/middleware/)
   b. Data fetching (useFetch, useAsyncData)
   c. Render komponen Vue menjadi HTML string
4. HTML + data dikirim ke browser
5. Vue "menghidupkan" (hydrate) HTML di browser
6. Setelah hydration, aplikasi berjalan sebagai SPA

Keuntungan:
- Search engine bisa meng-crawl konten lengkap
- First Contentful Paint (FCP) lebih cepat
- Meta tags ter-render di server

// useFetch — composable bawaan Nuxt untuk SSR-safe fetching
// Otomatis: dijalankan di server saat SSR, di client saat navigasi SPA

// Contoh 1: useFetch sederhana
const { data: products, pending, error } = await useFetch('/api/products', {
  query: { category: 'electronics', limit: 10 },
  // Cache key — data di-cache berdasarkan key unik
  key: 'products-electronics',
  // Transform data sebelum digunakan
  transform: (response) => response.items,
  // Re-fetch setiap 60 detik
  getCachedData: (key, nuxtApp) => {
    return nuxtApp.payload.data[key] || null
  }
})

// Contoh 2: useAsyncData untuk logic kompleks
const { data: userProfile } = await useAsyncData('user-profile', async () => {
  // Bisa melakukan multiple fetch atau logic kompleks
  const [user, posts, stats] = await Promise.all([
    $fetch('/api/users/me'),
    $fetch('/api/users/me/posts'),
    $fetch('/api/users/me/stats')
  ])

  return { user, posts, stats }
}, {
  // Hanya jalankan di server (tidak di client)
  server: true,
  // Lazy: jangan block rendering, fetch di background
  lazy: false
})

// Contoh 3: Lazy fetching (tidak block rendering)
const { data: comments } = await useLazyFetch(`/api/posts/${id}/comments`)
// UI langsung dirender, comments muncul setelah fetch selesai

<script setup>
// ❌ Salah — akan error di server
const width = window.innerWidth

// ✅ Benar — gunakan onMounted
onMounted(() => {
  const width = window.innerWidth
  console.log('Window width:', width)
})

// ✅ Atau gunakan useNuxtApp().$isServer
const nuxtApp = useNuxtApp()
if (!nuxtApp.isServer) {
  const token = localStorage.getItem('token')
}

// ✅ Composable yang aman untuk SSR
const isClient = ref(false)
onMounted(() => { isClient.value = true })
</script>

// nuxt.config.ts — konfigurasi untuk SSG
export default defineNuxtConfig({
  // Route prerendering — generate halaman statis
  nitro: {
    prerender: {
      routes: [
        '/',
        '/about',
        '/blog',
        '/pricing'
      ]
    }
  },

  // Atau set seluruh app sebagai static
  // Jalankan: npx nuxi generate
  // Ini akan meng-generate semua halaman sebagai HTML statis
})

// Jalankan perintah untuk generate static
// npm run generate
// Hasil: .output/public/ — siap di-deploy ke CDN

<script setup>
// Untuk dynamic routes, Nuxt perlu tahu semua slug yang tersedia
// agar bisa generate halaman statis untuk setiap slug

// Method 1: Define routes via nuxt.config.ts
// nitro.prerender.routes: ['/blog/post-1', '/blog/post-2']

// Method 2: Gunakan sitemap module
// @nuxtjs/sitemap bisa auto-generate routes dari API

// Fetch data — saat SSG, ini dijalankan di build time
const route = useRoute()
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`, {
  key: `post-${route.params.slug}`
})

// Data di-embed ke HTML statis
// Saat user mengunjungi halaman, data langsung tersedia tanpa fetch ulang
</script>

// Nuxt mendukung hybrid rendering!
// Beberapa halaman SSR, beberapa SSG, beberapa SPA

export default defineNuxtConfig({
  routeRules: {
    // Halaman beranda — SSR (selalu fresh)
    '/': { prerender: true },

    // Blog — SSG (diprerender saat build)
    '/blog/**': { prerender: true },

    // Dashboard — SPA (client-side only, perlu auth)
    '/dashboard/**': { ssr: false },

    // API — ISR (revalidate setiap 60 detik)
    '/api/products/**': { swr: 60 },

    // Halaman statis — cache selamanya
    '/about': { static: true },

    // Redirect
    '/old-page': { redirect: '/new-page' }
  }
})

1. KOMPONEN (dari folder components/)
   File: components/UserCard.vue
   → Langsung pakai: <UserCard />
   → Nested: components/blog/PostCard.vue → <BlogPostCard />

2. COMPOSABLES (dari folder composables/)
   File: composables/useAuth.js
   → Langsung pakai: const { user, login } = useAuth()

3. UTILS (dari folder utils/)
   File: utils/format.js → export function formatRupiah() {...}
   → Langsung pakai: formatRupiah(150000)

4. VUE APIs (built-in)
   ref(), computed(), watch(), onMounted(), etc.
   → Tidak perlu: import { ref } from 'vue'

5. NUXT APIs (built-in)
   useFetch(), useRoute(), useState(), navigateTo(), etc.
   → Tidak perlu: import { useFetch } from '#app'

<template>
  <div class="user-card">
    <img :src="user.avatar" :alt="user.name" />
    <h3>{{ user.name }}</h3>
    <p>{{ user.email }}</p>
    <span :class="['badge', user.role]">{{ user.role }}</span>
  </div>
</template>

<script setup>
// Props dengan defineProps — juga auto-imported
const props = defineProps({
  user: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>
.user-card {
  padding: 1.5rem;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
}

.badge {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge.admin { background: #ef4444; color: white; }
.badge.member { background: #3b82f6; color: white; }
</style>

<template>
  <div class="users-page">
    <h1>Daftar Pengguna</h1>

    <!-- Tidak perlu import UserCard — langsung pakai! -->
    <div class="users-grid">
      <UserCard
        v-for="user in users"
        :key="user.id"
        :user="user"
      />
    </div>
  </div>
</template>

<script setup>
// Tidak perlu import ref, useFetch — auto-imported!
const { data: users } = await useFetch('/api/users')
</script>

<template>
  <div>
    <!-- Komponen berat yang jarang dilihat -->
    <!-- Prefix LazyLoad untuk lazy loading -->
    <LazyHeavyChart v-if="showChart" :data="chartData" />

    <!-- Komponen modal yang jarang muncul -->
    <LazyUserModal v-model="showModal" />

    <!-- Komponen di bawah fold -->
    <LazyBlogComments :post-id="postId" />
  </div>
</template>

<script setup>
const showChart = ref(false)
const showModal = ref(false)
const postId = useRoute().params.id
</script>

// composables/useCounter.js
// Auto-imported — langsung pakai useCounter() di mana saja

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)

  function increment() { count.value++ }
  function decrement() { count.value-- }
  function reset() { count.value = initialValue }

  // Computed
  const isPositive = computed(() => count.value > 0)
  const isZero = computed(() => count.value === 0)

  return {
    count: readonly(count),  // readonly agar tidak bisa diubah dari luar
    increment,
    decrement,
    reset,
    isPositive,
    isZero
  }
}

// composables/useAuth.js
export function useAuth() {
  // useState — shared state yang SSR-safe
  // Key harus unik untuk menghindari conflict
  const user = useState('auth-user', () => null)
  const token = useState('auth-token', () => null)

  const isAuthenticated = computed(() => !!user.value)
  const isAdmin = computed(() => user.value?.role === 'admin')

  async function login(email, password) {
    try {
      const response = await $fetch('/api/auth/login', {
        method: 'POST',
        body: { email, password }
      })

      user.value = response.user
      token.value = response.token

      // Simpan token di cookie (SSR-safe)
      const cookieToken = useCookie('auth_token', {
        maxAge: 60 * 60 * 24 * 7, // 7 hari
        httpOnly: false,
        secure: true,
        sameSite: 'lax'
      })
      cookieToken.value = response.token

      return { success: true }
    } catch (error) {
      return { success: false, error: error.data?.message }
    }
  }

  async function logout() {
    user.value = null
    token.value = null

    // Hapus cookie
    const cookieToken = useCookie('auth_token')
    cookieToken.value = null

    await navigateTo('/login')
  }

  async function fetchUser() {
    if (!token.value) return

    try {
      const data = await $fetch('/api/auth/me', {
        headers: { Authorization: `Bearer ${token.value}` }
      })
      user.value = data.user
    } catch {
      await logout()
    }
  }

  return {
    user: readonly(user),
    isAuthenticated,
    isAdmin,
    login,
    logout,
    fetchUser
  }
}

// server/api/hello.js
// Otomatis tersedia di: GET /api/hello

export default defineEventHandler((event) => {
  return {
    message: 'Halo dari Nuxt Server API!',
    timestamp: new Date().toISOString()
  }
})

// server/api/products.js
// GET /api/products?category=electronics&limit=10

export default defineEventHandler(async (event) => {
  // Mengambil query parameters
  const query = getQuery(event)
  const { category, limit = 20, page = 1 } = query

  // Fetch dari database atau external API
  const products = await db.products.findMany({
    where: category ? { category } : {},
    take: parseInt(limit),
    skip: (parseInt(page) - 1) * parseInt(limit),
    orderBy: { createdAt: 'desc' }
  })

  const total = await db.products.count({
    where: category ? { category } : {}
  })

  return {
    products,
    pagination: {
      page: parseInt(page),
      limit: parseInt(limit),
      total,
      totalPages: Math.ceil(total / parseInt(limit))
    }
  }
})

// server/api/products.post.js
// Suffix .post = hanya menerima POST request

export default defineEventHandler(async (event) => {
  // Validasi body request
  const body = await readBody(event)

  if (!body.name || !body.price) {
    throw createError({
      statusCode: 400,
      statusMessage: 'Name dan price wajib diisi'
    })
  }

  // Simpan ke database
  const product = await db.products.create({
    data: {
      name: body.name,
      price: parseFloat(body.price),
      category: body.category || 'uncategorized',
      description: body.description || ''
    }
  })

  return { success: true, product }
})

// server/middleware/auth.js
// Middleware ini berjalan untuk SEMUA server routes

export default defineEventHandler((event) => {
  // Hanya untuk API routes yang dimulai dengan /api/protected
  const path = getRequestURL(event).pathname

  if (path.startsWith('/api/protected')) {
    const token = getHeader(event, 'Authorization')

    if (!token) {
      throw createError({
        statusCode: 401,
        statusMessage: 'Token tidak ditemukan'
      })
    }

    // Verifikasi token dan attach user ke event context
    try {
      const user = verifyToken(token.replace('Bearer ', ''))
      event.context.user = user
    } catch {
      throw createError({
        statusCode: 401,
        statusMessage: 'Token tidak valid'
      })
    }
  }
})

// server/utils/db.js
// Auto-imported di semua server files

import { PrismaClient } from '@prisma/client'

// Singleton pattern — satu instance Prisma
let prisma

export function usePrisma() {
  if (!prisma) {
    prisma = new PrismaClient()
  }
  return prisma
}

// Contoh penggunaan di server API:
// server/api/users/[id].js
// const db = usePrisma()
// const user = await db.user.findUnique({ where: { id: params.id } })

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    // UI & Styling
    '@nuxtjs/tailwindcss',
    '@nuxtjs/color-mode',
    '@nuxtjs/google-fonts',

    // State Management
    '@pinia/nuxt',

    // Images & Media
    '@nuxt/image',

    // SEO & Analytics
    '@nuxtjs/sitemap',
    '@nuxtjs/robots',
    'nuxt-gtag',

    // Authentication
    '@sidebase/nuxt-auth',

    // Content
    '@nuxt/content',
  ],

  // Konfigurasi per-module
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
    configPath: 'tailwind.config.js'
  },

  colorMode: {
    classSuffix: '',
    preference: 'dark',
    fallback: 'dark'
  },

  image: {
    quality: 80,
    format: ['webp', 'jpg']
  },

  sitemap: {
    hostname: 'https://beebanelabs.pages.dev'
  }
})

// modules/logger.js
// Custom Nuxt module — auto-loaded dari folder modules/

import { defineNuxtModule, createResolver, addServerHandler } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'logger',
    configKey: 'logger'
  },

  defaults: {
    enabled: true,
    level: 'info'
  },

  setup(options, nuxt) {
    if (!options.enabled) return

    const resolver = createResolver(import.meta.url)

    // Register server middleware
    addServerHandler({
      handler: resolver.resolve('./runtime/logger-middleware'),
      middleware: true
    })

    console.log(`[Logger] Module aktif — level: ${options.level}`)
  }
})

// middleware/auth.js
// Middleware bernama — dipanggil manual di setiap halaman

export default defineNuxtRouteMiddleware((to, from) => {
  const { isAuthenticated } = useAuth()

  if (!isAuthenticated.value) {
    // Redirect ke login jika belum autentikasi
    return navigateTo('/login', {
      // Simpan halaman tujuan untuk redirect setelah login
      query: { redirect: to.fullPath }
    })
  }
})

// middleware/log.global.js
// Suffix .global = berjalan di SEMUA halaman (tidak perlu manual)

export default defineNuxtRouteMiddleware((to, from) => {
  console.log(`[Route] ${from.path} → ${to.path}`)
  console.log(`[Time] ${new Date().toISOString()}`)
})

<template>
  <div class="dashboard">
    <h1>Dashboard</h1>
    <p>Selamat datang, {{ user.name }}!</p>
  </div>
</template>

<script setup>
// Define middleware untuk halaman ini
definePageMeta({
  middleware: ['auth'],
  // Gunakan layout tertentu
  layout: 'dashboard'
})

const { user } = useAuth()
</script>

<template>
  <div class="dashboard-layout">
    <aside class="sidebar">
      <div class="logo">
        <NuxtLink to="/dashboard">Dashboard</NuxtLink>
      </div>
      <nav>
        <NuxtLink to="/dashboard">Overview</NuxtLink>
        <NuxtLink to="/dashboard/products">Produk</NuxtLink>
        <NuxtLink to="/dashboard/orders">Pesanan</NuxtLink>
        <NuxtLink to="/dashboard/settings">Settings</NuxtLink>
      </nav>
    </aside>

    <main class="main-content">
      <header class="top-bar">
        <h2>{{ pageTitle }}</h2>
        <button @click="logout">Logout</button>
      </header>

      <!-- Slot untuk konten halaman -->
      <slot />
    </main>
  </div>
</template>

<script setup>
const { logout } = useAuth()
const route = useRoute()
const pageTitle = computed(() => route.meta.title || 'Dashboard')
</script>

<style scoped>
.dashboard-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--sidebar-bg);
  padding: 1.5rem;
  border-right: 1px solid var(--border-color);
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 2rem;
}

.main-content {
  padding: 2rem;
}
</style>

<template>
  <div class="default-layout">
    <AppHeader />

    <main class="main-content">
      <slot />
    </main>

    <AppFooter />
  </div>
</template>

<style scoped>
.main-content {
  min-height: calc(100vh - 160px);
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
</style>

# Install Vercel CLI
npm i -g vercel

# Deploy langsung dari terminal
vercel

# Atau connect repository GitHub ke Vercel Dashboard
# Vercel otomatis mendeteksi Nuxt dan konfigurasi build

# Environment Variables
# Set di Vercel Dashboard → Settings → Environment Variables
# NUXT_PUBLIC_API_URL=https://api.example.com
# NUXT_SECRET_KEY=your-secret-key

# netlify.toml
[build]
  command = "npm run build"
  publish = ".output/public"

[build.environment]
  NODE_VERSION = "20"

# Redirect SPA fallback
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# Build untuk production
npm run build

# Hasil build ada di .output/
# .output/
# ├── server/        ← Node.js server
# └── public/        ← Static assets

# Jalankan production server
node .output/server/index.m4

# Atau dengan PM2 (process manager)
pm2 start .output/server/index.m4 --name nuxt-app

# Environment variables
NUXT_PORT=3000
NUXT_HOST=0.0.0.0
NUXT_PUBLIC_API_URL=https://api.example.com

# Generate static files
npx nuxi generate

# Output ada di .output/public/
# Upload folder ini ke CDN manapun:
# - Cloudflare Pages
# - GitHub Pages
# - AWS S3 + CloudFront
# - Azure Static Web Apps

# Preview hasil generate secara lokal
npx nuxi preview