Displaying content

This section is only for Markdown files.

Component

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

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

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

    return {
      page
    }
  }
}
</script>

Props:

  • document:
    • Type: Object
    • required

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

Style

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 docs directory.

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.