Nuxt Content uses the Markdown syntax and conventions to provide a rich-text editing experience.
In Nuxt Content, Prose represents the HTML tags output from the Markdown syntax, for example title levels, links... A Vue component corresponds to each tag, allowing you to override them if needed.
Just a paragraph.If you want to customize a Prose component, here are the recommended steps:
components/content/ directory.Front-matter is a convention of Markdown-based CMS to provide meta-data to pages, like description or title. In Nuxt Content, the front-matter uses the YAML syntax with key: value pairs.
These data are available when rendering the content and can hold any information that you would need.
You can declare a front-matter block at the top of the Markdown files in the content/ directory with the --- identifier.
---title: 'Title of the page'description: 'meta description of the page'---<!-- Content of the page -->| Key | Type | Default | Description |
|---|---|---|---|
title | string | First <h1> of the page | Title of the page, will also be injected in metas |
description | string | First <p> of the page | Description of the page, will be shown below the title and injected into the metas |
draft | Boolean | false | Mark the page as draft (and only display it in development mode). |
navigation | Boolean | true | Define if the page is included in fetchContentNavigation return value. |
head | Object | true | Easy access to useContentHead |
When used together with <ContentDoc> or the document-driven mode to display the current page, the useContentHead() composable will be used to set the page's metadata.
Code highlighting allows you to display beautiful code blocks in your website.
Nuxt Content uses Shiki, that colors tokens with VSCode themes.
Code highlighting works both on ProseCode and ProseCodeInline.