基于文件的 CMS
以 Markdown、YAML、CSV 或 JSON 格式编写内容,并在组件中查询。
查询构建器
使用类 MongoDB 的 API 查询内容,按需获取正确的数据。
SQLite 驱动
向内容中添加自定义字段,适用于各种类型的项目。
Markdown 与 Vue
在 Markdown 文件中使用 Vue 组件,支持 props、插槽和嵌套组件。
代码高亮
结合 Shiki 集成支持 VS Code 主题,在网站上显示漂亮的代码块。
可视化编辑器
通过我们的可视化编辑器 Nuxt Studio,让团队成员轻松编辑 Nuxt Content 项目。
导航生成
从内容文件生成结构化对象,几分钟内展示导航菜单。
文章组件
使用 Vue 组件自定义 HTML 排版标签,让内容风格统一。
部署无处不在
Nuxt Content 兼容所有托管服务,支持静态、服务端、无服务器和边缘部署。
内容管理所需的一切
结合基于文件的简单性与 Vue 组件的强大功能。构建内容丰富的网站,从文档页到复杂应用。
Markdown 遇见 Vue 组件
我们创造了 MDC 语法,让你可以在 Markdown 文件中使用带有 props 和插槽的 Vue 组件。
用 frontmatter 语法指定 props
使用
#
来定义组件插槽添加任意其他 HTML 属性
珠穆朗玛峰。
珠穆朗玛峰是世界上海拔最高的山峰,海拔8848米。

---
title: 山峰网站
description: 一个关于世界最具标志性山峰的网站。
---
::landing-hero
---
image: /mountains/everest.png
---
#title
珠穆朗玛峰。
#description
珠穆朗玛峰是世界上海拔最高的山峰,海拔8848米。
::
<script setup lang="ts">
defineProps<{ image: string }>()
</script>
<template>
<section class="flex flex-col sm:flex-row sm:items-center flex-col-reverse gap-4 py-8 sm:gap-12 sm:py-12">
<div>
<h1 class="text-4xl font-semibold">
<slot name="title" />
</h1>
<div class="text-base text-gray-600 dark:text-gray-300">
<slot name="description" />
</div>
</div>
<img :src="image" class="w-1/2 rounded-lg">
</section>
</template>
类型安全 查询
使用集合定义内容结构,并通过 schema 验证实现完全的类型安全查询。
为相似内容文件创建集合
为集合 frontmatter 定义 schema
在 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>
import { defineContentConfig, defineCollection, z } from '@nuxt/content'
export default defineContentConfig({
collections: {
blog: defineCollection({
source: 'blog/*.md',
type: 'page',
// 为文档集定义自定义 schema
schema: z.object({
tags: z.array(z.string()),
image: z.string(),
date: z.Date()
})
})
}
})
让 任何人编辑 您的网站
通过 Studio 编辑您的 Nuxt Content 网站——我们的 CMS 平台,提供类似 Notion 的 Markdown 编辑器和为 YAML
与 JSON
文件生成的表单。支持实时预览和在线协作。
拖拽式 Markdown 可视化编辑器
为 YML 和 JSON 文件生成表单
邀请编辑者通过 Google 登录并发布更改