发布 Nuxt Content 3.0

我们非常激动地宣布 Nuxt Content 3.0.0 的首个稳定版本 ✨

🚀 性能提升

Nuxt Content v3 放弃了基于文件的存储方式，转而采用 SQL 数据库系统。使用数据库代替基于文件的存储可减少查询大规模数据集时的许多 I/O 操作。

这一切对用户透明，Nuxt Content 依然支持零配置下的开发模式、服务器托管和静态生成。

此外，现在支持无服务器托管，客户端导航性能也得到提升。

无服务器兼容性

Nuxt Content v2 的一个关键挑战是为了存储所有内容文件导致捆绑包体积过大。这在部署到无服务器或边缘平台如 Netlify、NuxtHub 或 Vercel 时是个问题。

在无服务器环境中，每个用户请求都会触发 Nuxt 服务器的新实例，每次都是从零开始。此“无状态”特性意味着无法在服务器内存中存储数据，亦不能使用基于文件的数据库如 SQLite。因此，我们实现了数据库适配器，可以独立于你的服务器实例持久化数据。

浏览器端的 WASM SQLite

对于客户端导航，模块使用类似的方法。当应用执行第一条内容查询时，会从服务器下载生成的转储文件，并在浏览器内初始化本地 SQLite 数据库。从此之后，所有查询都在本地执行，无需再调用服务器：极大提升了应用响应速度，带来无缝的用户体验。

🗄️ 内容集合

集合是 Nuxt Content 项目中相关内容项的分组。它们帮助更高效地组织和管理大型数据集。

定义集合

你现在可以在 content.config.ts 文件中定义集合，以配置数据库结构、实用类型以及查找、解析和查询内容的方法。

集合模式

模式确保集合内数据的一致性，并提升 TypeScript 的类型推断，以更好地集成 Nuxt Content 工具。

import { defineCollection, z } from '@nuxt/content'

// 导出集合
export const collections = {
  // 使用 `defineCollection` 工具定义集合
  posts: defineCollection({
    // 指定此集合中的内容类型
    type: 'page',
    // 加载匹配此模式的所有文件
    source: 'blog/**/*.md',
    // 为此集合定义自定义模式
    schema: z.object({
      date: z.date(),
      image: z.object({
        src: z.string(),
        alt: z.string()
      }),
      badge: z.object({
        label: z.string(),
        color: z.string()
      })
    })
  }),
}

🔧 简化的 Vue 工具

我们简化了工具，现暴露：

• queryCollection 用于通过强大的查询构建器获取集合
• queryCollectionNavigation 用于获取特定集合生成的导航
• queryCollectionItemSurroundings 用于获取特定路径的相邻内容
• queryCollectionSearchSections 用于从集合获取可搜索的章节，增强内容发现

这四个工具允许你在 Vue 页面和组件中高效获取和查询内容：

<script setup lang="ts">
const { data: posts } = await useAsyncData('blog', () => {
  return queryCollection('blog').all()
})
</script>

<template>
  <div>
    <h1>博客</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <NuxtLink :to="post.path">{{ post.title }}</NuxtLink>
      </li>
    </ul>
  </div>
</template>

📦 内置组件

我们更新了组件，只包含必要的部分：

• ContentRenderer 用于渲染解析后的 Markdown 为 HTML 和 Vue 组件
• Slot 取代了 ContentSlot，因我们现在支持用指令解包，使你的 Vue 组件能完美兼容 Vue 和 Markdown 中的使用
• Prose 组件 是为 MDC 语法量身打造的预设计组件，集成了样式以提升外观表现

以下是显示 Markdown 文件内容的示例：

<script lang="ts" setup>
const { data: page } = await useAsyncData(() => {
  return queryCollection('content').path('/about').first()
})
</script>

<template>
  <ContentRenderer v-if="page" :value="page" />
  <p v-else>关于页面尚未编写。</p>
</template>

🔷 TypeScript 集成

新的集合系统为所有数据自动提供 TypeScript 类型。每个工具和 API 均基于你的集合定义实现强类型，确保开发过程中的类型安全。

⬆️ 从 V2 迁移

迁移尽可能简便，因此我们编写了 迁移指南。

🖼️ Studio 集成

Nuxt Studio 是一个可视化编辑运行中 Nuxt Content 项目的平台。支持 Markdown、YAML 和 JSON 文件，编辑器确保灵活与易用。

预览 API

之前独立的模块 Studio 模块 已升级得更加通用，现直接集成在 Nuxt Content 作为一个 预览 API。

启用 Studio 的预览功能比以往更简单 —— 只需在 Nuxt Content 配置中将 Studio API 设置为你的 Preview API：

export default defineNuxtConfig({
  content: {
    preview: {
      api: 'https://api.nuxt.studio'
    }
  }
})

这一简化意味着不再需要额外安装模块来支持 Studio，设置更快更简便。此外，预览 API 现已泛化，支持其他服务提供提供顶级的编辑体验。

统一文档

除了集成，我们还将 Content 和 Studio 的文档与网站统一成一个全面的资源。仅 Studio 平台（用户登录后可用）保持为一个独立站点。

我们现在可以在 Studio 中利用数据结构和集合。Studio 平台支持并适配 集合 和 用户自定义模式。此改进将支持针对 YAML 和 JSON 文件及 Markdown 文件中的 front-matter 自动生成表单。