Displaying content

Component

Page Body

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
• tag:
  • Type: string

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

Excerpt

If you are utilizing the excerpt feature, you can display the content of your excerpt using the following model:

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

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

    return {
      page
    }
  }
}
</script>

Root Element

<nuxt-content> component will add a div element as the root of the content by default. You can change this by setting the tag prop. Below example will use article as the root element.

<nuxt-content :document="doc" tag="article">

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