Skip to content

Latest commit

 

History

History
239 lines (200 loc) · 6.32 KB

announcing-v2.md

File metadata and controls

239 lines (200 loc) · 6.32 KB
Raw
layout navigation title description cover date authors tags category
blogpost
false
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.
/announcing_v2.png
2022-05-24
Nuxt
Content
Release
Announcements

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:

::list{icon="heroicons-outline:badge-check"}

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:

::code-group

content/
  index.md

# Hello World

My first paragraph.

https://content.nuxtjs.org

::

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

<template>
  <ContentDoc />
</template>

And voilà!

::code-group ::code-block{label="Preview" preview} # Hello World

My first paragraph.

https://content.nuxtjs.org

:: ::

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

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

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

#content

{
  "_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.

::list{icon="heroicons-outline:badge-check"}

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

::alert MDC is Markdown, so nothing changes and you can keep using the .md extension. ::

Show me how it works!

::code-group

::my-button{type="success"}
  ✏️ Start **writing!**
::
<script setup>
defineProps({
  type: {
    type: String,
    default: 'info'
  }
})
</script>

<template>
  <button :class="type">
    <Markdown unwrap="p" />
  </button>
</template>
::code-block{label="Preview" preview}
<MyButton type="success">✏️ Start <strong>writing!</strong></MyButton>

:: ::

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 ✨

:video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"}

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 😊

::alert 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.