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:
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
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()
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.
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.
.md
extension.::my-button{type="success"} ✏️ Start **writing!**::
Head over to the MDC guide to discover the full power of Markdown with Vue components.
Nuxt Content has many features, we built a video to showcase how to start using it in a Nuxt 3 application, in 3 minutes ✨
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.