Lzh on GitHub

安装

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

安装包

选择你偏好的包管理器来安装 Nuxt Content v3：

pnpm add @nuxt/content

注册模块

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

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
# My First Page

Here is some content.

阅读更多关于编写 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>Home not found</div>
</template>
如果你在一个新的 Nuxt 项目中安装 Nuxt Content，并且你没有 pages 目录，你还需要更新 app.vue 文件，通过添加 NuxtPage 组件来允许渲染页面。（如果你的项目中已经有一些页面，则无需此操作。）
app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
就是这样！你现在已经创建了你的第一个 Nuxt Content 页面。