GridsomeでVue.jsプラグインを使う方法

Gridsomeに最適化されたプラグインの場合

Gridsomeには公式のものと、有志の方が作成されたGridsome用プラグインが用意されています。

Plugins | Gridsome

プラグインのうち、頭に@gridsomeとついているものは公式プラグインです。それ以外は非公式プラグインですが、Gridsomeの公式ページで紹介されているものについては、動作するものがほとんどです。

Gridsome専用のものもありますが、基本的にはVue.jsのプラグインをGridsome用にしたプラグインが多いようです。

Grdisome用プラグインの使い方

Grdisome用プラグインの場合、gridsome.config.jsにプラグインの設定を書くだけでGridsomeプロジェクト内で使えるようになります。

//gridsome.config.js

module.exports = {
  plugins: [
    {
      use: 'gridsome-plugin-modal'
    }
  ]
}

プラグインによっては、オプションなどの設定が必要ですが、基本的にはガイドに載っている通りにやれば使えます。

Vue.js用のプラグインの場合

GridsomeはVue.jsベースなので、基本的にはVue.jsのプラグインが使えます。ただし、GridsomeはSSG（静的サイトジェネレータ）なので、ブラウザでレンダリングして動く前提のVue.jsとは違い、プログラムを解析してHTMLドキュメントを書き込むため、使えない（エラーになる）プラグインも結構あります。

例えば、「gridsome develop」コマンドで立ち上がる開発サーバーでは問題ないのに、「gridsome build」でGridsomeプロジェクトをビルドをすると、プラグインがwindowの値を使っていると、値が取れなくて（windowがないから当たり前）エラーになったりします。

Vue.js用のプラグインの使い方

Vu.jsプラグインの場合は、Vue.jsでの使い方と基本的には同じです。main.jsでimportして、Vueに追加する方法でほとんどのプラグインが使えます。

import Vuetify from "vuetify";

export default function(Vue, { router, appOptions, head, isClient }) {
  Vue.use(Vuetify);
}

プラグインによっては、追加で設定が必要な場合があるので、その辺りは公式のドキュメントを読むか、ユーザーフォーラムなどを参考にしながらトライ＆エラーでやるしかありません。

GridsomeでVue.jsのプラグインを10個以上使ってみましたが、使えるもの・使えないものが結構あります。

Gridsome自体が新しい静的サイトジェネレータなので、プラグイン周りの情報が少なくて辛い部分がありますが、公式のプラグインが結構揃っているので、まずはそこから始めるのが良さそうです。