Qandar

Q Gridsomeでプラグインはどうやって使う？

公開日：2021年4月2日

Answer

Gridsome用プラグインの場合

Gridsome用に書かれたプラグインであれば、

  1. プラグインをインストール（npm or yarn）
  2. gridsome.config.jsのpluginsに記述

だけで使えるようになります。

例えば、Google Analyticsプラグインだったら、

yarn add @gridsome/plugin-google-analytics

でインストールして、gridsome.config.jsに、

module.exports = {
  plugins: [
    {
      use: '@gridsome/plugin-google-analytics',
      options: {
        id: 'UA-XXXXXXXXX-X'
      }
    }
  ]
}

でプラグインを使う旨と、プラグインに渡すパラメータを記述すればすぐに適用されます。

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

Vue.jsプラグインの場合は、プラグインにもよりますが、

  1. プラグインをインストール（npm or yarn）
  2. main.js（src/main.js）に記述

という、Vue.jsのプラグインの使い方そのままです。

ただし、GridsomeでVue.js用のプラグインを使う場合は、

  1. window APIなどブラウザ系のAPIを使っているとエラーになる
  2. 呼ぶタイミングによっては使えない

という点に注意が必要です。

特にwindow系のエラーは、プレビューサーバー（gridsome develop）ではエラーが出ないのに、ビルド（gridsome build）するとエラーになることが多いので、プラグインを追加したあとは、テストでビルドしておいたほうが安心です。

新着Q&A