The git-based CMS for
Nuxt projects.
Nuxt Content is a module for Nuxt that provides a simple way to manage content for your application. It allows developers to write their content in Markdown, YAML, or JSON files and then query and display it in their application.
Everything you need for content management
Combine file-based simplicity with Vue component power. Build content-rich websites, from documentation pages to complex applications.
Markdown meets Vue components
We created the MDC syntax to let you use Vue components with props and slots inside your Markdown files.
#The Everest.
The Everest is the highest mountain in the world, standing at 8,848 meters above sea level.
---
title: The Mountains Website
description: A website about the most iconic mountains in the world.
---
::landing-hero
---
image: /images/everest.png
---
#title
The Everest.
#description
The Everest is the highest mountain in the world, standing at 8,848 meters above sea level.
::
<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>
Query with Type-Safety
Define your content structure with collections and query them with schema validation and full type-safety.
<script setup lang="ts">
const { data: posts } = await useAsyncData('blog', () => {
return queryCollection('blog').all()
})
</script>
<template>
<div>
<h1>Blog</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',
// Define custom schema for docs collection
schema: z.object({
tags: z.array(z.string()),
image: z.string(),
date: z.Date()
})
})
}
})
Make changes without technical skills
Edit your Nuxt Content website with Studio, our CMS platform with Notion-like Markdown editors and generated forms for YAML and JSON files. Live preview and online collaboration included.
Add a git-based CMS to your Nuxt project.
