The git-based CMS for
Nuxt projects.
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.
- 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 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
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.
---
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.
- Create collections for similar content files
- Define schema for the collection front matter
- Get auto-completion in your Vue files
<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 { defineCollection, z } from '@nuxt/content'
export const 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 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
