Q. GridsomeでTOC（目次）を自動生成したい

vue-remarkを使う

Gridsomeでマークダウンファイルを使う場合は、

1. @gridsome/source-filesystem
2. @gridsome/vue-remark

のどちらかのプラグインを使うのが公式のやり方です。

Gridsomeでサイトを作る紹介ページなどでは、@gridsome/source-filesystemを使っている例が多いですが、@gridsome/source-filesystemはToc（目次）を自動生成する機能がないため、@gridsome/vue-remarkを使います。

@gridsome/vue-remarkでToCを自動生成する方法

@gridsome/vue-remark単体ではTocの作成に対応していないので、プラグインを使います。

yarn add @gridsome/vue-remark remark-toc

プラグインを使う旨をgridsome.config.jsに記述します。

module.exports = {
  //
  // 省略
  //
  plugins: [
    {
      use: '@gridsome/vue-remark',
      options: {
        //
        // 省略
        //
        plugins: [
          ['remark-toc']
        ],
      }
    }
  ]
}

あとはマークダウンファイルでTocパートを追記します。

## toc

## 見出し

記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文。

これで自動生成されます。

自動生成されなかったら？

なお、@gridsome/vue-remarkで複数のデータソースを読み取る場合は、gridsome.config.js内の全てのvue-remarkの設定に、

plugins: [
  ['remark-toc']
]

を入れないと、内部エラーが起こってTOC（目次）が生成されなくなります。

これは公式のドキュメントなどにも記載されていない条件なので要注意です。