Learn Nuxt - Content & CMS Integration

#Introduction

Many applications — blogs, documentation, landing pages — need content that can be changed easily without rewriting code. Episode 11 covers how to manage content in Nuxt with @nuxt/content: storing content as Markdown inside the repository, or pulling it from headless CMSes like Strapi and Sanity.

The advantage: content teams write in Markdown or a CMS, while pages are generated from the same data. We'll also look at how to build content-based pages, simple search, and preview mode to review content before it's published.

#Static Content Integration with @nuxt/content

#Installation and Configuration

Install the content module and put Markdown files in the content folder:

npm install @nuxt/content

Aktifkan module

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

Create a content/blog folder, then write your first article. This Markdown file becomes the source of truth for the content:

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

Each content file can carry frontmatter like title and date — metadata you can use for filtering and display.

#Rendering Content

Use the <ContentDoc /> component to render the active document:

Merender konten markdown

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

<ContentDoc /> reads content based on the current route, renders Markdown into HTML, and handles code, images, and Vue components embedded inside the content.

#Sourcing Content from Markdown, MDX, and Headless CMS

#MDX for Content with Components

With MDX, Markdown can load Vue components directly inside it:

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

The KotakInfo component inside the Markdown is rendered as a real component. This is very useful for callouts, interactive tables, or code demos inside articles.

#Headless CMS as a Source

Content can also come from a headless CMS. The common flow: fetch content from the CMS API at build time, then store it as queryable data. This pattern is often paired with cron jobs or webhooks to update content without redeploying.

#Content-Driven Pages and Search

#Querying Content with queryContent

For article listings, query content using the queryContent composable:

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() filters the published articles then sorts them from newest to oldest. The results can be rendered as a list of links with <NuxtLink>.

#Searching Content

For simple search, filter by keyword:

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())
)

The search above is enough for small content collections. For thousands of documents, consider a full search index like elasticlunr or MiniSearch.

#Preview Mode and Content Workflows

#Preparing Preview

Content teams need to see content before it's published. One approach: read an env value for preview mode, then show draft content:

Query draft dalam preview

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

config.public.previewMode is controlled through NUXT_PUBLIC_PREVIEW_MODE in the environment. In preview mode, the published filter is relaxed so drafts show up too.

#Content Workflow

A suggested workflow: writers edit Markdown on a separate branch, preview runs with preview mode enabled, then changes are merged into the main branch, triggering a rebuild. Episodes 19 and 20 will connect this workflow with CI/CD and deployment.

#Conclusion

Episode 11 connects Nuxt with content: @nuxt/content manages Markdown and MDX directly in the repository, a headless CMS can serve as an alternative source, content-based pages are built with queryContent, simple search is easy to add, and preview mode bridges the content team's workflow.

Key takeaways:

• @nuxt/content renders Markdown from the content folder with <ContentDoc />.
• Content file frontmatter can be used for filtering and metadata.
• MDX allows Vue components to be embedded inside content.
• queryContent fetches, filters, and sorts documents.
• Content can be sourced from a headless CMS as an alternative to Markdown.
• Preview mode uses runtime config to show drafts to editors.

In the next episode, episode 12, we will discuss security and authentication — securing your application with authentication, managing sessions with secure cookies, protecting routes with middleware, and applying Role-Based Access Control and secure data fetching. Your store's user accounts are starting to take shape.