- Announcements

Announcing Nuxt Content v2

2 years after the release of Content v1, we are proud to announce the second version of Nuxt Content built for Nuxt 3.

2 years after the release of Content v1, we are proud to announce the second version of Nuxt Content built for Nuxt 3.

On top of the Nuxt 3 support, it comes with new features:

What is Nuxt Content?

Nuxt Content is a Nuxt module that reads Markdown, YAML, CSV and JSON files in the content/ directory.

Let’s imagine a content/ directory with the following structure:

Directory Structure
content/
  index.md
index.md
# Hello WorldMy first paragraph.https://content.nuxtjs.org

Create a pages/[...slug].vue file with the <ContentDoc> component inside:

pages/[...slug].vue
<template>  <ContentDoc /></template>

And voilà!

You can also query the hello.md file by using the queryContent() composable:

const file = await queryContent('hello').findOne()

The returned file won't be Markdown or HTML, but a JSON representing the abstract syntax tree.

You can do much more than fetching only one file. Take a look at the querying content section to discover its full potential.

Introducing MDC

We wanted to leverage the power of Vue components in a content edition experience. After months of testing on the Nuxt website, we are happy to introduce the MarkDown Components syntax.

  • Use your own Vue components in Markdown
  • Customize them with props
  • Write Markdown content in slots (and of course, you can nest them)
  • Experience blazing fast HMR for Markdown and MDC (as fast as Vite!)
MDC is Markdown, so nothing changes and you can keep using the .md extension.

Show me how it works!

content/index.md
::my-button{type="success"}  ✏️ Start **writing!**::
components/MyButton.vue
<script setup>defineProps({  type: {    type: String,    default: 'info'  }})</script><template>  <button :class="type">    <Markdown unwrap="p" />  </button></template>

Head over to the MDC guide to discover the full power of Markdown with Vue components.

An introduction video

Nuxt Content has many features, we built a video to showcase how to start using it in a Nuxt 3 application, in 3 minutes ✨

Thank you

We are thankful for all the contributions we received in Content v1 and are impatient to see what you will build with Nuxt 3 and Content v2 😊

The repository is open source under the MIT license and available on GitHub: nuxt/content

Head over to the Get started section to start playing with Content v2 ✨


Bonus: We created Content Wind - a lightweight Nuxt template to write a Markdown-driven website powered by Nuxt Content and TailwindCSS.

It is available on GitHub. Check out the demo on content-wind.nuxt.dev.