Vue.jsでMarkdownファイルを読み込んでHTMLにして表示する

Vue.jsやNuxt.jsで何かしらのサイトを作ってる時にわざわざHTMLを書くほどでもないようなページを作る際、Markdownで内容を書いてHTMLに変換すると便利。というちょっとしたメモ。

タイトルではVue.jsと書いていますがNuxt.jsでも使えます。

webpackの準備

.mdファイルの読み込みにはraw-loaderを使うのでインストール。

また、MarkdownのパースとHTMLへの変換でmarkedを使うので、これもインストール。 パースと変換さえ出来ればmarkedである必要はありませんが、今回はmarkedを使います。

yarn add -D raw-loader marked

github.com

github.com

次にwebpackの設定。

.mdファイルでraw-loaderを使うように設定。

webpack.config.js

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/,
        loader: 'raw-loader',
        exclude: /(node_modules)/,
      },
    ],
  },
};

Nuxt.jsを使っている場合はnuxt.config.jsのbuild.extend内で設定。

nuxt.config.js

// nuxt.config.js

module.exports = {
  build: {
    extend (config, { isDev, isClient }) {
      config.module.rules.push({
        test: /\.md$/,
        loader: 'raw-loader',
        exclude: /(node_modules)/,
      });
    },
  },
};

ComponentでMarkdownを読み込み、HTMLに変換

Webpackの設定を行ったので、importでMarkdownファイルの内容を読み出せます。

templateでは変換したHTMLをそのまま表示するので、v-htmlディレクティブを使って表示します。(二重括弧やv-textディレクティブではテキストとして表示される。)

<template>
  <div v-html="markedContent">
  </div>
</template>

<script>
  import marked from 'marked';
  import markDownSource from '~/path/to/mark-down-file.md';

  export default {
    computed: {
      source () {
        return markDownSource;
      },
      markedContent () {
        return marked(this.source);
      },
    },
  };
</script>