@nuxtjs/markdownitを使ってマークダウンの記事をHTMLで出力する

前回、nuxt.jsとcontentfulを使ってブログサイトを環境構築しました。
今回はmarkdownitというnpm moduleを使ってContentfulで書いたマークダウンの記事をHTMLで出力したいと思います。

設定していく

インストール

公式サイトを見ながら今回は@nuxtjs/markdownitを使ってやっていきます。

$ npm install @nuxtjs/markdownit

クリスマス仕様・・・？

コマンド実行したらクリスマスっぽいバナーが流れてきました 🎅 < Hello

nuxt.config.jsに設定を追加する

nuxt.config.js

modules: [
  '@nuxtjs/axios',
  '@nuxt/content',
  '@nuxtjs/markdownit' //この１行追加
],
// ~~~~~~省略~~~~~~~

// 追加
markdownit: {
    injected: true,   // $mdを使ってどこからでも使えるようになる
    breaks: true      // 改行を<br>に変換してくれる
  }
}

vueファイルに$mdを追加する

templateの一部を差し替え

v-htmlを使用してHTMLを出力していきます

2重中括弧の mustaches は、データを HTML ではなく、プレーンなテキストとして扱います。実際の HTML として出力するためには、v-html ディレクティブを使用する必要があります。 引用：Vue.js - 生のHTML

_slug.vue

<!-- before -->
<div>
  {{ article.fields.body }}
</div>

<!-- after -->
<div v-html="$md.render(article.fields.body)"></div>

HTMLで出力できた

検証画面

サイト画面

npmのscopeって

@がついているパッケージ(@nuxtjs/markdownitとか)はscope付きパッケージといいます。
同じ名前のパッケージは存在できないので@nuxtjs/markdownitや@hoge/markdownitのようにscopeを使用することで別のユーザーや組織が作成したパッケージと競合することなく作成ができます。

公式サイトのスコープに関する説明

終わりに

npmを追加しただけなので短いですが以上になります。
今回記事を書きながら実装しましたが、その際にバグを見つけてしまったので頑張って直そうと思います。。。