md ファイルのパスに合わせて Nuxt のパスも設定する
create: 2019-11-29
Blog Nuxt化 Nuxt.js Markdown

Nuxt.js に MarkDown を読み込む」で、Markdownファイルを Vue に流し込むことができました。
今回は、ディレクトリに散らばるmdファイルのパスに合わせたURLにアクセスすると該当ページが表示されるようにします。

例えば、https://bitto.jp/posts/blog/test でアクセスされたら ~/md-contents/blog/test.md を表示したいですね。

動的パスに対応する vue ファイルを作成する

URL が md ファイルまでのパスとして渡されるので、これを元にファイルを取得します。
Nuxt.jsasyncDataメソッドで受け取ったparams.pathMatchから取得できます。

<template lang="pug">
.posts-contents
  article
    .title.is-1 {{attributes.title}}
    .markdown-body(v-html="html")
</template>
<script>
  export default {
    async asyncData({ params }) {
      const.path = params.pathMatch
      // URLからパス解決
      const fileContent = await import(`~/md-contents/${path.replace(/\/$/, '')}.md`)

      // mdファイルの属性をすべてページのデータとして保持
      return {
        ...fileContent,
        title: fileContent.attributes.title
      }
    }
  }
</script>

ソース中の...fileContentが何しているかわからない方は「JS の分割代入」も参考にしてみてください。

これで動的パスから解決できるようになりました。

devモードの場合このまま動作しますが、ホスティングのためにnuxt generateするためには予め md ファイルに対応する全てのパス情報が必要です。

asyncDataSSR(server side rendering)でコールされるメソッドです。
つまり、サーバ側で実行されてからクライアントに返す情報になるので、nuxt generate時には静的情報となります。

この辺は「sitemap.xml の作成(動的パスへの対処)」で解説予定。