Belajar Nuxt - Content & CMS Integration

#Pendahuluan

Banyak aplikasi — blog, dokumentasi, landing page — membutuhkan konten yang mudah diubah tanpa menulis ulang kode. Episode 11 membahas cara mengelola konten di Nuxt dengan @nuxt/content: menyimpan konten sebagai Markdown di dalam repository, atau mengambilnya dari headless CMS seperti Strapi dan Sanity.

Keunggulannya: tim konten menulis di Markdown atau CMS, sementara halaman dibangkitkan dari data yang sama. Kita juga akan melihat cara membangun halaman berbasis konten, pencarian sederhana, dan preview mode untuk memeriksa konten sebelum dipublikasikan.

#Integrasi Konten Statis dengan @nuxt/content

#Install dan Konfigurasi

Install module konten dan letakkan file Markdown di folder content:

npm install @nuxt/content

Aktifkan module

export default defineNuxtConfig({
  modules: ["@nuxt/content"],
})

Buat folder content/blog lalu tulis artikel pertama. File Markdown ini menjadi sumber kebenaran konten:

---
title: "Promo Agustus untuk Semua"
date: 2026-08-10
---
 
Promo bulan ini berlaku untuk seluruh kategori produk
dengan minimal belanja seratus ribu rupiah.

Setiap file konten bisa membawa frontmatter seperti title dan date — metadata yang bisa dipakai untuk filtering dan penampilan.

#Merender Konten

Gunakan komponen <ContentDoc /> untuk merender dokumen aktif:

Merender konten markdown

<template>
  <main>
    <ContentDoc />
  </main>
</template>

<ContentDoc /> membaca konten berdasarkan route saat ini, merender Markdown menjadi HTML, dan menangani kode, gambar, serta komponen Vue yang disematkan di dalam konten.

#Sourcing Konten dari Markdown, MDX, dan Headless CMS

#MDX untuk Konten dengan Komponen

Dengan MDX, Markdown bisa memuat komponen Vue langsung di dalamnya:

# Cara Mengukur Ukuran Baju
 
<KotakInfo>
  Gunakan meteran dan ukur dada terlebih dahulu.
</KotakInfo>

Komponen KotakInfo di dalam Markdown dirender sebagai komponen sungguhan. Ini sangat berguna untuk callout, tabel interaktif, atau demo kode di artikel.

#Headless CMS sebagai Sumber

Konten bisa juga berasal dari headless CMS. Alur umumnya: ambil konten dari API CMS saat build, lalu simpan sebagai data yang bisa di-query. Pola ini sering dipakai bersama cron job atau webhook untuk memperbarui konten tanpa deploy ulang.

#Content-Driven Pages dan Search

#Querying Konten dengan queryContent

Untuk daftar artikel, query konten menggunakan composable queryContent:

Mengambil daftar artikel

const { data: artikel } = await useAsyncData("artikel", () => {
  return queryContent("/blog")
    .where({ published: true })
    .sort({ date: -1 })
    .find()
})

queryContent("/blog").where({ published: true }).sort({ date: -1 }).find() memfilter artikel yang dipublikasikan lalu mengurutkannya dari yang terbaru. Hasilnya bisa dirender sebagai daftar link dengan <NuxtLink>.

#Pencarian Konten

Untuk pencarian sederhana, filter berdasarkan kata kunci:

Filter konten by keyword

const hasil = await queryContent("/blog")
  .where({ published: true })
  .find()
 
const terfilter = hasil.filter((item) =>
  item.title.toLowerCase().includes(kataKunci.value.toLowerCase())
)

Pencarian di atas cukup untuk koleksi konten kecil. Untuk ribuan dokumen, pertimbangkan index pencarian penuh seperti elasticlunr atau MiniSearch.

#Preview Mode dan Content Workflows

#Mempersiapkan Preview

Tim konten butuh melihat konten sebelum dipublikasikan. Salah satu pendekatan: baca nilai env untuk mode preview, lalu tampilkan konten draft:

Query draft dalam preview

const config = useRuntimeConfig()
 
const daftar = await queryContent("/blog")
  .where(config.public.previewMode === "true" ? {} : { published: true })
  .find()

config.public.previewMode dikendalikan lewat NUXT_PUBLIC_PREVIEW_MODE di environment. Dalam preview mode, filter published dilonggarkan sehingga draft ikut tampil.

#Alur Kerja Konten

Alur yang disarankan: penulis mengubah Markdown di cabang terpisah, preview dijalankan dengan mode preview aktif, lalu perubahan di-merge ke cabang utama yang memicu build ulang. Episode 19 dan 20 akan menghubungkan alur ini dengan CI/CD dan deployment.

#Penutup

Episode 11 menghubungkan Nuxt dengan konten: @nuxt/content mengelola Markdown dan MDX langsung di repository, headless CMS bisa menjadi sumber alternatif, halaman berbasis konten dibangun dengan queryContent, pencarian sederhana mudah ditambahkan, dan preview mode menjembatani alur kerja tim konten.

Inti yang harus dibawa pulang:

• @nuxt/content merender Markdown dari folder content dengan <ContentDoc />.
• Frontmatter file konten bisa dipakai untuk filtering dan metadata.
• MDX memungkinkan komponen Vue disematkan di dalam konten.
• queryContent mengambil, memfilter, dan mengurutkan dokumen.
• Konten bisa bersumber dari headless CMS sebagai alternatif Markdown.
• Preview mode memakai runtime config untuk menampilkan draft ke editor.

Di episode 12 selanjutnya kita akan membahas security dan authentication — mengamankan aplikasi dengan autentikasi, mengelola session dengan secure cookies, melindungi routes dengan middleware, serta menerapkan Role-Based Access Control dan secure data fetching. Akun pengguna toko kalian mulai berbayang.