Back to Details

nuxt-content

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Nuxt Content v3

Nuxt Content v3

Progressive guidance for content-driven Nuxt apps with typed collections and SQL-backed queries.
面向内容驱动型Nuxt应用的渐进式指南，支持类型化集合和基于SQL的查询。

When to Use

适用场景

Working with:
  • Content collections (
    content.config.ts
    , 
    defineCollection
    )
  • Remote sources (GitHub repos, external APIs via 
    defineCollectionSource
    )
  • Content queries (
    queryCollection
    , navigation, search)
  • MDC rendering (
    <ContentRenderer>
    , prose components)
  • Database configuration (SQLite, PostgreSQL, D1, LibSQL)
  • Content hooks (
    content:file:beforeParse
    , 
    content:file:afterParse
    )
  • i18n multi-language content
  • NuxtStudio or preview mode
  • LLMs integration (
    nuxt-llms
    )
For writing documentation: use 
document-writer
skill For Nuxt basics: use 
nuxt
skill For NuxtHub deployment: use 
nuxthub
skill (NuxtHub v1 compatible)
适用于以下工作场景：
  • 内容集合（
    content.config.ts
    、
    defineCollection
    ）
  • 远程源（GitHub仓库、通过
    defineCollectionSource
    接入的外部API）
  • 内容查询（
    queryCollection
    、导航、搜索）
  • MDC渲染（
    <ContentRenderer>
    、 prose组件）
  • 数据库配置（SQLite、PostgreSQL、D1、LibSQL）
  • 内容钩子（
    content:file:beforeParse
    、
    content:file:afterParse
    ）
  • i18n多语言内容
  • NuxtStudio或预览模式
  • LLM集成（
    nuxt-llms
    ）
编写文档时： 使用
document-writer
技能 Nuxt基础操作： 使用
nuxt
技能 NuxtHub部署： 使用
nuxthub
技能（兼容NuxtHub v1）

Available Guidance

可用指南

Read specific files based on current work:
  • references/collections.md - defineCollection, schemas, sources, content.config.ts
  • references/querying.md - queryCollection, navigation, search, surroundings
  • references/rendering.md - ContentRenderer, MDC syntax, prose components, Shiki
  • references/config.md - Database setup, markdown plugins, renderer options
  • references/studio.md - NuxtStudio integration, preview mode, live editing
根据当前工作内容阅读特定文件：
  • references/collections.md - defineCollection、模式、数据源、content.config.ts
  • references/querying.md - queryCollection、导航、搜索、关联内容
  • references/rendering.md - ContentRenderer、MDC语法、prose组件、Shiki
  • references/config.md - 数据库设置、Markdown插件、渲染器选项
  • references/studio.md - NuxtStudio集成、预览模式、实时编辑

Loading Files

文件加载建议

Consider loading these reference files based on your task:
  • references/collections.md - if setting up collections, schemas, or content.config.ts
  • references/querying.md - if using queryCollection, navigation, or search
  • references/rendering.md - if rendering markdown/MDC or working with ContentRenderer
  • references/config.md - if configuring database, markdown plugins, or renderer options
  • references/studio.md - if integrating NuxtStudio or preview mode
DO NOT load all files at once. Load only what's relevant to your current task.
请根据任务需求加载以下参考文件：
  • references/collections.md - 若正在设置集合、模式或content.config.ts
  • references/querying.md - 若正在使用queryCollection、导航或搜索功能
  • references/rendering.md - 若正在渲染Markdown/MDC或使用ContentRenderer
  • references/config.md - 若正在配置数据库、Markdown插件或渲染器选项
  • references/studio.md - 若正在集成NuxtStudio或使用预览模式
请勿一次性加载所有文件。 仅加载与当前任务相关的文件。

Key Concepts

核心概念

ConceptPurpose
CollectionsTyped content groups with schemas
Page vs Data
page
= routes + body, 
data
= structured data only
Remote sources
source.repository
for GitHub, 
defineCollectionSource
for APIs
queryCollectionSQL-like fluent API for content
MDCVue components inside markdown
ContentRendererRenders parsed markdown body
概念用途
集合（Collections）带模式的类型化内容组
页面 vs 数据
page
= 路由 + 内容主体，
data
= 仅结构化数据
远程源（Remote sources）
source.repository
用于GitHub，
defineCollectionSource
用于API接入
queryCollection类SQL的流畅式内容查询API
MDC嵌入Vue组件的Markdown语法
ContentRenderer渲染解析后的Markdown内容主体

Directory Structure

目录结构

project/
├── content/                    # Content files
│   ├── blog/                   # Maps to 'blog' collection
│   └── .navigation.yml         # Navigation metadata
├── components/content/         # MDC components
└── content.config.ts           # Collection definitions
project/
├── content/                    # 内容文件
│   ├── blog/                   # 对应'blog'集合
│   └── .navigation.yml         # 导航元数据
├── components/content/         # MDC组件
└── content.config.ts           # 集合定义文件

Official Documentation

官方文档

Token Efficiency

Token效率

Main skill: ~300 tokens. Each sub-file: ~800-1200 tokens. Only load files relevant to current task.
主技能约300 Token。每个子文件约800-1200 Token。仅加载与当前任务相关的文件。