9

Announcing Nuxt Content v2

 2 years ago
source link: https://content.nuxtjs.org/blog/announcing-v2/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
May 24, 2022 - 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:

content/
  index.md

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

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

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 ✨

hqdefault.jpg

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.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK