もっと詳しく

nuxtでmdの読み込もうとしたら、いろいろでてきたため、めもしておきます。最終的に@nuxt/contentを採用しました。

nuxtでmdの読み込み比較

ぐぐったらいろいろとでてきました。

  • rontmatter-markdown-loader
  • raw-loader
  • markdown-it
  • markdown-to-vue-loader
  • nuxt/content

軽く口コミを調査しました。

frontmatter-markdown-loader

raw-loader

npmをみると、ダウンロード数は多そうです。

markdown-it

nuxt/content

raw-loaderの記事をQiitaに書いていたきらぷかさん、のちほどnuxt/contentをおしています。

悪評もなかったし、Nuxtに備わった機能なのでNuxt/Contentにしました。

目次や全文検索など気になる機能もあったのも後押ししました。

開発モードでのビックリするほど高速なホットリロード

Markdownの中でVueコンポーネントを利用できます

全文検索

静的サイト生成(SSG)のサポートnuxt generate

強力なクエリビルダーAPI (MongoDBライク)

PrismJSを利用した、Markdown内コードブロックのシンタックスハイライト

目次の自動生成

Markdown, CSV, YAML, JSON(5)

XMLを適切に処理します

hooksによる拡張

https://content.nuxtjs.org/ja/

npm install @nuxt/content

インストール。

npm install @nuxt/content

nuxt.configを設定。ここまでは公式のまんま。

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

nuxt/contentの使い方(ブログも作れる)

単純にmdの読み込み

今回はヘルプページ を作成します。まずテスト読み込み。

contentのフォルダが生成されているため、とりあえず、フォルダ直下にtext.mdを作成します。

---
title: タイトル
---

# テスト

テストです。

次はvue側。表示はこう。await $content(‘test’).fetch()で取得しています。

async asyncData({ $content }) {
  const helps = await $content('test').fetch()

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

v-forで一覧取得

しかし、今回はヘルプページ の作成のためv-forで一覧取得にしたいです。

フォルダを掘ってmdファイルを配置します。testをhelpsというフォルダ名に変更します。

  async asyncData({ $content }) {
    const helps = await $content('helps')
      .sortBy('title')
      .fetch()
    return { helps }
  }

並び順がおかしかったため、sortByを追加しました。

html側もv-forで回して一覧表示に変えます。

<div v-for="help in helps" :key="help.slug">
  <nuxt-link :to="'/helps/' + help.slug">
    {{ help.title }}
  </nuxt-link>
</div>

slug.vueを追加

slugにあたるところがありません。_slug.vueを作成します。

params.slugはnuxtのリファレンスを参照しましょう。

ページディレクトリ
pages ディレクトリには、アプリケーションのビューとルートが格納されています。Nuxt はこのディレクトリ内のすべての .vue ファイルを読み込んで、ルーターの設定を自動的に作成します。
nuxtjs.org

htmlです。helps.titleはタイトルを表示しなければなくてもかまいません。

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

javascriptです。

export default {
  async asyncData({ $content, params }) {
    const helps = await $content('helps/', params.slug).fetch()
    return { helps }
  }
}

フォルダ構造

├── content
│   └── helps
│       ├── qa1.md
│       ├── qa2.md
│       └── qa3.md
~
├── pages
│   ├── helps
│   │   ├── _slug.vue
│   │   └── qa-list.vue
│   └── index.

最初リンク切れをおこしました。contentとpagesの直下にあるhelpsというフォルダ名が同名じゃないとダメでした。

nuxt/contentのcssの読み込み

_slug.vueにcssをかけばOKです。

<style>
.nuxt-content h1 {
  font-size: 50px;
  color: green;
}
</style>

ただ、ヘルプの場合、_slug.vue側でレイアウトを作る方が早い気がします。

<template>
  <article>
    <b-container fluid="xl">
      <b-row class="mx-5 my-0 py-0">
        <b-col cols="12">
          <div class="qa-q">
            <h2 class="help-title">{{ helps.title }}</h2>
          </div>
          <div class="qa-a">
            <nuxt-content :document="helps" />
          </div>
        </b-col>
      </b-row>
    </b-container>
  </article>
</template>

ご参考になれば幸いです。