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 easily import and display it in their application.

Get Started Open Visual Editor

File-based CMS: Write your content in Markdown, YML, 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.
Visual editor: Let your team edit your Nuxt Content project with a visual editor.
Navigation Generation: Get your content structure in a structured object and display a navigation in minutes.
Prose Component: Easily drop in components to render different parts of your Markdown content.
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 any content-rich website, from documentation to complex applications.

Markdown meets Vue

We invented the MDC syntax to let you use your Vue components with props and slots inside your Markdown files.

Specify props with frontmatter syntax
Use components slots with `#`
Add any other html attributes

Learn more about MDC

---
title: Nuxt Content
description: An open source blog theme powered by Nuxt.
---

::landing-hero
---
image: /images/mountain.png
---
#title
Welcome to Alpine

#description
An [open source blog theme](https://github.com/nuxt-themes/alpine) powered by [Nuxt Content](https://content.nuxtjs.org), editable on [Nuxt Studio](https://nuxt.studio).
::

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</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 front matter
Get auto-completion in your Vue files

Learn more about query

<script setup lang="ts">
const { data: posts } = await useAsyncData('posts', () => {
  return queryCollection('blog')
    .order('date', 'DESC')
    .select('title', 'path', 'description')
    .all()
})
</script>

<template>
  <div v-for="post in posts" :key="post.path">
    <h2>{{ doc.title }}</div>
    <p>{{ doc.description }}</p>
    <NuxtLink :to="doc.path">Read post →</NuxtLink>
  </div>
</template>

export default defineContent({
  collections: ['blog'],
})

Make changes like a pro

Edit your Nuxt Content website with our Notion-like Markdown editor with live preview and online collaboration.

Commit & push to GitHub with one click
Invite editors to login with Google and publish changes
Edit the content in real-time with your team

Discover the Nuxt Content Editor

Add a git-based CMS to your Nuxt project.

Start reading docs Open Visual Editor

The git-based CMS for Nuxt projects.