The git-based CMS for Nuxt projects

Nuxt Studio beta is out

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.

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.

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

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>

Add a git-based CMS to your Nuxt project.