Gridsomeでマークダウンの中でコンポーネントを使う方法

マークダウンファイルのインポートにvue-remarkを使う

Gridsomeでは、マークダウンファイルのインポートするには、

• @gridsome/source-filesystem
• @gridsome/vue-remark

の二つの方法が、公式プラグインとして用意されています。

@gridsome/source-filesystemはシンプルにマークダウンファイルをHTMLにコンバートしますが、@gridsome/vue-remarkはマークダウンファイルをVueインスタンスとして取り込むという違いがあります。

つまり、@gridsome/vue-remarkを使えばマークダウンファイルはVueインスタンスになるので、Vueコンポーネントを呼び出せるようになるのです。

コンポーネントの呼び出し方法

マークダウンファイルの中でコンポーネントの呼び出す方法は、基本的にはVueファイルと同じです。

1. importでコンポーネントをロード
2. テンプレートと同様にコンポーネントを呼ぶ

---
title: 記事のタイトル
date: 2021-03-10T01:00:00
lastmod: 2021-03-10T01:00:00
summary: 記事のサマリー
category: ブログ
tags:
  - Gridsome
---

import ArticleImg from '~/components/ArticleImg.vue'

<ArticleImg :src="'/imgs/sample.png'" :alt="'記事のalt'" />

# {{title}}

記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容

記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容記事の内容

フロントマッターは、Vueインスタンスのdataとして取り込まれているので、フロントマッターのデータもマークダウン内で呼び出せます。

作法的には、Vueの作法になるので、変数以外はシングルクオートでくくるのを忘れないようにしましょう。

@gridsome/vue-remarkのメリット

@gridsome/vue-remarkを使う最大のメリットは、マークダウンを自分で拡張できる点です。

@gridsome/source-filesystemは、単純にHTMLに変換するだけなので拡張が全くできませんが、@gridsome/vue-remarkであればコンポーネントを通じて、独自のショートハンドなどを設定できます。

@gridsome/vue-remarkのデメリット

@gridsome/vue-remarkを使うとTocを自動生成することもできるので、非常に便利なのですが、Vueインスタンスに変換するので、ロードが重くなるのがデメリットです。ですので、使いどころをしっかりと見極めないと、ページロードが遅延するので注意しましょう。

Gridsomeでマークダウンの中でコンポーネントを使う方法でした。