入门

安装

在你的 Nuxt 应用中开始使用 Nuxt Content v3。

安装包

选择你喜欢的包管理器来安装 Nuxt Content v3：

pnpm add @nuxt/content

注册模块

在你的 nuxt.config.ts 文件中添加 Nuxt Content 模块：

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/content']
})

自动安装

使用 create-nuxt CLI 创建新 Nuxt 项目时，可以直接从交互式模块选择器中选择 @nuxt/content。这将自动为你安装并注册该模块。

npm create nuxt <project-name>
当你在 Node.js 中运行项目时，Nuxt Content 会询问你使用哪个数据库连接器。 你可以选择安装 better-sqlite3 或 sqlite3 包。
如果你不想安装任何包，可以使用从 Node.js@v22.5.0 或更新版本自带的原生 SQLite。 请查看 experimental.nativeSqlite 配置。

创建你的第一个集合

在项目根目录创建一个 content.config.ts 文件：

content.config.ts
import { defineContentConfig, defineCollection } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md'
    })
  }
})

该配置创建了一个默认的 content 集合，用于处理项目 content 文件夹内的所有 Markdown 文件。你可以根据需要自定义集合配置。

type: page 表示内容文件和网站页面之间是一对一的关系。
了解更多，请查看我们的 集合指南。

创建你的第一个 Markdown 页面

在项目根目录创建 content/index.md 文件：

content/index.md
# 我的第一个页面

这里是一段内容。

查看更多关于编写 Markdown 页面 的信息。

显示你的页面

创建 pages/index.vue 文件并展示页面内容：

pages/index.vue
<script setup lang="ts">
const { data: home } = await useAsyncData(() => queryCollection('content').path('/').first())

useSeoMeta({
  title: home.value?.title,
  description: home.value?.description
})
</script>

<template>
  <ContentRenderer v-if="home" :value="home" />
  <div v-else>首页未找到</div>
</template>
如果你在一个新的 Nuxt 项目中安装 Nuxt Content，并且项目中没有 pages 目录，你还需要更新 app.vue 文件，通过添加 NuxtPage 组件来允许渲染页面。（如果你的项目已有页面，则无需此操作。）
app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
就是这样！你已经创建了你的第一个 Nuxt Content 页面。

介绍

专为 Nuxt 开发者设计的强大基于 Git 的 CMS。

配置

Nuxt Content 采用合理的默认配置。