迁移

内容 V1 文档

如何迁移

1. 确保您的开发服务器 (nuxt dev) 未运行，并删除任何包锁定文件 (package-lock.json、yarn.lock 或 pnpm-lock.yaml)
2. 升级到 Nuxt 3（查看 Nuxt 3 迁移指南)

- "nuxt": "latest"
+ "nuxt": "^3.0.0"

3. 升级内容模块

- "@nuxt/content": "^1.15.1"
+ "@nuxt/content": "^2.0.0"

3. 然后，重新安装您的依赖项

npm install

全局组件

Nuxt 内容 v2 的全局组件目录现在为 ~/components/content。

- components/global
+ components/content

获取内容

没有全局 $content 变量，您可以使用 queryContent 可组合函数来获取内容。

- const posts = await this.$content('/blog', { deep: true }).only(['title']).fetch()
+ const { data: posts } = await useAsyncData('posts-list', () => queryContent('/blog').only(['title']).find())

queryContent 提供与旧版 $content 相同的实用程序，并进行了一些改进

• fetch 已放弃，转而使用新的查找实用程序
  • find: 获取内容列表
  • findOne: 获取第一个匹配的内容
• surround 已放弃，转而使用 findSurround
• where 实用程序可以链接

  queryContent()
    .where({ /* first step conditions */ })
    .where({ /* second step conditions */ })
    .find()
  

• 没有用于全文搜索的 search 实用程序。

  const doc = await getContentDocument(post.id)
  

• 有一个新的 fetchContentNavigation 实用程序，旨在根据 content/ 目录结构提供项目树。

渲染内容

<NuxtContent> 组件已删除，转而使用 <ContentRenderer> 组件。

<ContentDoc> 组件接收文档路径，然后获取并渲染文档。

<script setup lang="ts">
const route = useRoute()

const { data } = await useAsyncData('get-document', () => queryContent(route.path).findOne())
</script>

<template>
  <ContentRenderer :value="data" />
</template>

如果您知道 route.path 将与您的内容文件相同，可以使用 <ContentDoc> 组件，速度会更快

<template>
  <ContentDoc />
</template>

<ContentDoc> 组件将获取当前路由路径的文档，并使用 <ContentRenderer> 渲染它。

功能比较

查询内容