ここではMarkdownファイルのみを対象としています。

Component

template内で <nuxt-content> コンポーネントを直接使用して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

Markdownファイルに書くことができる内容についての詳細はこちらをご覧ください。コンテンツを作成する

Style

アプリのデザインによっては、Markdownを適切に表示するためにいくつかのスタイルを記述する必要があるかもしれません。

<nuxt-content>コンポーネントは自動的に.nuxt-contentクラスを追加します。これを使用してスタイルをカスタマイズできます。

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

このドキュメントサイトでのスタイルカスタマイズの例を見てみましょう。

ライブ編集

バージョン**>= v1.4.0** で利用可能です。 開発中のみ、<nuxt-content>コンポーネント上でダブルクリックすることで、コンテンツを編集することができます。テキストエリアは、現在のファイルの内容を編集することができ、ファイルシステムに保存されます。

Edit this page on GitHub
Table of Contents