beta

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

Gridsomeではマークダウンファイルの中でVueコンポーネントを呼び出して使うことができます。今回は、その実装方法をまとめました。

公開日:2021年3月10日

マークダウンファイルのインポートに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でマークダウンの中でコンポーネントを使う方法でした。

Author

Koji Kadoma
Member of codit.work

新着ノート

新着コード