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, CSV or JSON files and then query and display it in their application.
File-based CMS
Write your content in Markdown, YAML, CSV or JSON and query it in your components.
Query Builder
Query your content with a MongoDB-like API to fetch the right data at the right time.
SQLite powered
Add custom fields to your content, making it suitable for various types of projects.
Markdown with Vue
Use Vue components in Markdown files, with props, slots and nested components.
Code highlighting
Display beautiful code blocks on your website with the Shiki integration supporting VS Code themes.
Visual Editor
Let your team edit your Nuxt Content project with Nuxt Studio, our visual editor.
Navigation Generation
Generate a structured object from your content files and display a navigation menu in minutes.
Prose Components
Customize HTML typography tags with Vue components to give your content a consistent style.
Deploy everywhere
Nuxt Content works on all hosting providers, static, server, serverless & edge.
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.
Specify props with frontmatter syntax
Use components slots with
#Add any other html attributes
The Everest.
The Everest is the highest mountain in the world, standing at 8,848 meters above sea level.
content/index.md
---
title: The Mountains Website
description: A website about the most iconic mountains in the world.
---
::landing-hero
---
image: /mountains/everest.jpg
---
#title
The Everest.
#description
The Everest is the highest mountain in the world, standing at 8,848 meters above sea level.
::
components/LandingHero.vue
<script setup lang="ts">
defineProps<{
image: string
}>()
</script>
<template>
<section class="flex flex-col sm:flex-row sm:items-center 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.
Create collections for similar content files
Define schema for the collection frontmatter
Get auto-completion in your Vue files
pages/blog.vue
<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>
content.config.ts
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()
})
})
}
})
Let anyone edit your website
Edit your Nuxt Content website with Studio, our CMS platform with Notion-like Markdown editor and generated forms for
YAML and JSON files. Live preview and online collaboration included.Visual editor with drag and drop for Markdown
Form generation for YML and JSON files
Invite editors to login with Google and publish changes
Add a git-based CMS to your Nuxt project.
