【Nuxt.js】 Nuxt/content を使用してみた #Nuxt

はじめに

最近 Nuxt/content を初めて使用してみたので、自身の記憶定着と備忘録のために記事として残しておきたいと思います。

Nuxt/content とは

Nuxt.js のアプリ内で、マークダウン方式を使用できるようになります。
マークダウン方式を使用したいファイルは、contentディレクトリの直下に作成し、末尾に.mdをつけます。

ファイル構成

とある製品、またはサイトについてなどの説明書きをまとめたページを作成するとします。

├ content
│　└ manuals
│　　├ 001.md
│　　└ 002.md
│
├ pages
│　└ manuals
│　　├ _slug.vue (詳細ページ)
│　　└ index.vue (一覧ページ)
└ index.vue

使用方法

1. Nuxt/content をインストールする

terminal.

$ npm install @nuxt/content

nuxt.config

{
  modules: [
    '@nuxt/content'
  ],
  :
}

1. pages/manuals/index.vue を作成する

ファイル構成でも簡単に表記していますが、pages/manuals/index.vue は、pages/manuals/_slug.vue へのリンクを載せた一覧ページになります。

pages/manuals/index.vue

<template>
  <div>
    <h1>一覧ページ</h1>
    <ul>
      <li v-for="manual in manuals" :key="manual.slug">
        <!-- manual.slug はファイル名を表すので、リンクへ飛べる -->
        <nuxt-link :to="'/manuals/' + manual.slug">
          {{ manual.title }}
        </nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData ({ $content }) {
    // content/manuals 直下のファイルを全て取得
    const manuals = await $content('manuals').fetch()
    return { manuals }
}
</script>

※ 最後まで実装をすると、このように表示されます。

1. pages/manuals/_slug.vue を作成する

この _slug.vue には、content/manuals/001.md や 002.md が読み込まれ,
各ページが表示されるようになります。

pages/manuals/_slug.vue

<template>
  <div>
    <h1>{{ manuals.title }}</h1>
    <!-- nuxt-content で作成した、content/manuals 直下のファイルを読み込む -->
    <nuxt-content :document="manuals" />
  </div>
</template>

<script>
export default {
  async asyncData ({ $content, params }) {
    const manuals = await $content('manuals', params.slug || 'index').fetch()
    return { manuals }
  }
}
</script>

1. content/manuals フォルダを作成し、ファイルをいくつか作成する

content/manuals/manuals1.md を作成する

content/manuals/manuals1.md

---
title: マニュアル１
---
## サブタイトル
マニュアル1の説明文です。

content/manuals/manuals2.md を作成する

content/manuals/manuals2.md

---
title: マニュアル2
---
## サブタイトル
マニュアル2の説明文です。

まとめ

Nuxt/content の導入で、マークダウンを使用することにより箇条書きが使いやすい、簡単に Qiita の投稿ページのようなものが作成できる、という点は大きな利点だと感じました。ただし、スタイルを当ててデザインを調整することを考えると、HTML の方が融通が効くという印象でした。
あくまでも個人的な意見ですが、以下のようにまとめます。

Nuxt/content
- マークダウン記法が使用できる
- スタイルは一般的なタグに当てる（h1, p, ulなど）
  - 同じタグのものに対するデザインの使い分けが効かない
- 比較的簡単かつシンプルなサイトには向いている
HTML
- スタイルは、各タグや各クラスに当てる
  - 同じタグのものでも、個々にデザインを当てられる
- 凝ったデザインで作りに向いている

終わり

今回は以上になります。
ざっくりとした記事にはなってしまいましたが、公式ページには様々なオプションなども掲載されていますので、用途に合わせて使用すると良いと思います。
私自身まだまだ未熟ではありますが、同じ様な立場の方に少しでも参考になれば幸いです。
また、もし内容に誤りなどがございましたら、ご指摘いただけますと幸いです。