Component

Вы можете использовать компонент <nuxt-content> непосредственно в шаблоне для отображения тела страницы:

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

Входные параметры:

• document:
  • Тип: object
  • обязательное

Изучите больше о том, что вы можете писать в вашем markdown файле в разделе написание контента.

Стили

В зависимости от того, что вы используете для разработки своего приложения, вам может потребоваться написать стили для правильного отображения markdown.

Компонент <nuxt-content> автоматически добавит класс .nuxt-content и вы сможете использовать его для стилизации:

.nuxt-content h1 {
  /* мои пользовательские стили для h1 */
}

Вы можете найти примеры в директории документации.

Редактирование контента в реальном времени

Доступно с версии >= v1.4.0

В режиме разработки вы можете редактировать контент дважды кликнув на компонент <nuxt-content>. В области текста вы сможете редактировать контент текущего файла и изменения будут сохранены на диске.