🌐 Nuxt.js & Server-Side Rendering (SSR) untuk Vue.js

Nuxt.js adalah framework berbasis Vue untuk membangun aplikasi web modern dengan fitur seperti Server-Side Rendering (SSR), Static Site Generation (SSG), dan File-Based Routing. Nuxt menyederhanakan pengembangan Vue untuk proyek skala menengah hingga besar.

---

🚀 1. Kelebihan Nuxt.js

• ✅ SEO-friendly (berkat SSR/SSG)
• ✅ File-based routing (tanpa config routing manual)
• ✅ Zero config setup
• ✅ Built-in middleware & auth
• ✅ Dukungan TypeScript dan Tailwind

---

⚙️ 2. Instalasi Proyek Nuxt

npx nuxi init nuxt-app
cd nuxt-app
npm install
npm run dev

nuxi adalah CLI terbaru untuk Nuxt 3.

---

📁 3. Struktur Direktori Nuxt

nuxt-app/
├── pages/           # ⬅️ Halaman otomatis jadi route
│   ├── index.vue    # ⬅️ /
│   └── about.vue    # ⬅️ /about
├── components/      # Komponen Vue biasa
├── layouts/         # Layout utama dan kustom
├── plugins/         # Plugin seperti Axios, VueUse
├── middleware/      # Auth dan guard route
├── nuxt.config.ts   # Konfigurasi Nuxt
└── app.vue          # Root App (opsional)

---

📄 4. Routing Otomatis

File: pages/index.vue

<template>
  <h1>Beranda</h1>
</template>

File: pages/about.vue

<template>
  <h1>Tentang Kami</h1>
</template>

Halaman otomatis tersedia di URL / dan /about.

---

📦 5. SSR, SSG, dan SPA

Mode	Keterangan
SSR	Server-rendered per request. SEO-friendly & real-time
SSG	Static site. Build sekali → cepat & ringan
SPA	Seperti Vue biasa, tanpa SSR

Konfigurasi di nuxt.config.ts

export default defineNuxtConfig({
  ssr: true, // false = SPA, true = SSR/SSG
});

---

📤 6. Fetching Data (useFetch)

<script setup>
const { data, error } = await useFetch('/api/posts');
</script>

<template>
  <div v-if="data">
    <h2>Artikel:</h2>
    <ul>
      <li v-for="post in data" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

---

🛠️ 7. Konfigurasi Nuxt (nuxt.config.ts)

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@pinia/nuxt'],
  app: {
    head: {
      title: 'Nuxt SSR Vue App',
      meta: [
        { name: 'description', content: 'Website menggunakan Nuxt.js dan SSR' }
      ]
    }
  }
});

---

🧪 8. Deployment SSR

Nuxt SSR bisa dideploy ke:

• Node.js Server (Express, Koa)

• Vercel (SSR mode)

• Netlify (untuk SSG mode)

• VPS / Docker

Untuk build SSR:

npm run build
npm run start

---

🎨 9. Tailwind + Pinia + TypeScript

Semua bisa digabung dengan mudah:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

npm install pinia

Pinia otomatis terhubung jika menggunakan @pinia/nuxt.