Docs, Blog & Legal Content

Content is Integrated with Nuxt Content v3. The template defines separate collections for docs, blog posts, and legal pages in each locale and renders them through Vue pages and shared content components.

Collections

content.config.ts defines six page collections:

All use a shared schema:

Rendering surfaces

useDocContent({ key }) derives a locale-aware path and queries the matching docs_*, blog_*, or legal_* collection. ContentRenderer renders the result. Docs use the docs layout for a sidebar, language/theme controls, and a table of contents. Components under app/components/docs are registered globally through nuxt.config.ts, so Markdown can use them directly.

Author content

---
title: Building a Billing Flow
description: Connect checkout, webhooks, and account state.
date: 2026-06-24
published: true
tags: [Payments, Nuxt]
author: Your Team
---

# Building a Billing Flow

Write Markdown here.

Place the file in the matching locale and content family. Docs use numbered folders/files such as 1.introduction/1.quick-start.md and 2.essentials/2.code-blocks.md; Nuxt Content uses those prefixes for source ordering while producing clean paths.

Documentation navigation is manual

When adding, moving, or deleting a doc, update useDocsSidebarLinks() in the same change. Links should use clean /docs/... paths; the sidebar renders them with NuxtLinkLocale to preserve /zh.

Query content

Use a typed collection name and query by path or fetch a list:

const page = await queryCollection("docs_en")
  .path("/en/docs/introduction/quick-start")
  .first()

const posts = await queryCollection("blog_en").all()

The included blog index queries every configured locale collection, removes index pages, filters by a fixed tag list, and paginates in memory. It does not currently restrict the list to the active locale or sort by date.

The shared schema accepts published, but the current docs/blog/legal queries do not filter on it. Add explicit publish/date/locale filters before using draft content or scheduled publishing; frontmatter alone does not hide a page.

Docs composables

• useDocContent selects a locale collection and resolves the current path.
• useCodeTreeState stores open state for code-tree examples.
• useFileIcon maps filenames/extensions through docs-common-config.ts.
• useBreadcrumb builds crumbs from Nuxt Content navigation state.

Verify

• New Markdown satisfies the shared frontmatter schema.
• The page renders directly and its manual docs link resolves in each locale.
• Docs table of contents and code/content components render correctly.
• Blog tags, images, dates, author, and pagination behave as intended.
• Draft/unpublished pages are excluded after adding the required filters.
• pnpm build reports no collection or Markdown errors.

Related pages