Displaying content

This section is only for Markdown files.


You can use <nuxt-content> component directly in your template to display the page body:

    <h1>{{ page.title }}</h1>
    <nuxt-content :document="page" />

export default {
  async asyncData ({ $content }) {
    const page = await $content('home').fetch()

    return {


  • document:
    • Type: Object
    • required

Learn more about what you can write in your markdown file in the writing content section.


Depending on what you're using to design your app, you may need to write some style to properly display the markdown.

<nuxt-content> component will automatically add a .nuxt-content class, you can use it to customize your styles:

.nuxt-content h1 {
  /* my custom h1 style */

You can find an example in the theme-docs main.css file. You can also take a look at the TailwindCSS Typography plugin to style your markdown content like we do in the @nuxt/content-theme-docs.

Live Editing

Available in version >= v1.4.0

In development, you can edit your content by double-clicking on the <nuxt-content> component. A textarea will allow you to edit the content of the current file and will save it on the file-system.

Edit this page on GitHub Updated at Tue, Mar 2, 2021