The git-based
CMS for Nuxt.
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.
---
title: The Mountains Website
description: A website about the most iconic mountains in the world.
---
::my-vue-hero-component{orientation="horizontal"}
#title
Welcome to the Mountains Website.
#description
This is a description of the Mountains Website.
::
This is a paragraph with **bold** and _italic_ text.
<script setup lang="ts">
const { data } = await useAsyncData('home', () => {
return queryCollection('content').path('/').first()
})
useSeoMeta({
title: data.value?.title,
description: data.value?.description
})
</script>
<template>
<ContentRenderer :value="data" />
</template>
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 } from '@nuxt/content'
import { z } from 'zod'
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
Currently in alpha
Edit your Nuxt Content website with the Studio module, our free and open-source visual interface to edit your content in production.
Live preview of your content directly on your production website
Visual editor for Markdown, YML and JSON files (coming in beta)
Publish changes directly on GitHub
Add a git-based CMS to your Nuxt project.
