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.

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

• The MDC Syntax for Components in Markdown
• Internationalization support
• Navigation generation
• Fully typed
• Multiple sources (experimental)
• Live preview edition (coming soon)

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:

content/
  index.md

# Hello WorldMy first paragraph.https://content.nuxtjs.org

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

<template>  <ContentDoc /></template>

And voilà!

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

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

{  "_type": "markdown",  "_id": "content:hello.md",  "_source": "content",  "_file": "hello.md",  "_extension": "md",  "_path": "/hello",  "_draft": false,  "_partial": false,  "_empty": false,  "title": "Hello World",  "description": "My first paragraph.",  "body": {    "type": "root",    "children": [      {        "type": "element",        "tag": "h1",        "props": {          "id": "hello-world"        },        "children": [          {            "type": "text",            "value": "Hello World"          }        ]      },      {        "type": "element",        "tag": "p",        "props": {},        "children": [          {            "type": "text",            "value": "My first paragraph."          }        ]      },      {        "type": "element",        "tag": "p",        "props": {},        "children": [          {            "type": "element",            "tag": "a",            "props": {              "href": "https://content.nuxtjs.org",              "rel": [                "nofollow",                "noopener",                "noreferrer"              ],              "target": "_blank"            },            "children": [              {                "type": "text",                "value": "https://content.nuxtjs.org"              }            ]          }        ]      }    ],    "toc": {      "title": "",      "searchDepth": 2,      "depth": 2,      "links": []    }  }}

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!)

Show me how it works!

::my-button{type="success"}  ✏️ Start **writing!**::

<script setup>defineProps({  type: {    type: String,    default: 'info'  }})</script><template>  <button :class="type">    <ContentSlot :use="$slots.default" 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 😊

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.