Gridsomeで外部スクリプトやCSSを追加する方法

大きく分けて二つの方法がある

main.jsに記述する

グローバルに外部ソースを読み込むのであれば、main.jsに組み込みます。

export default function (Vue, { head }) {
  // Add inline CSS
  head.style.push({
    type: 'text/css',
    cssText: '.some-custom-css {color: red}'
  })

  // Add an external CSS file
  head.link.push({
    rel: 'stylesheet',
    href: 'https://some-server.com/external-styleheet.css'
  })

  // Add an external JavaScript before the closing </body> tag
  head.script.push({
    src: 'https://some-server.com/external-script.js',
    body: true
  })

  // Add a meta tag
  head.meta.push({
    name: 'keywords',
    content: 'HTML,CSS,XML,JavaScript'
  })
}

例えば、Gridsomeで作成したサイトでGoogle Adsenseの審査を受ける場合は、

head.script.push({
  src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000",
  crossorigin: "anonymous"
});

という感じでOKです。

ここでロードしたスクリプトは、Gridsome下の全てのページでロードされます。

Vue Metaを使う

Gridsomeではテンプレートごとのmetaの書き換えにはVue Metaを使っています。

Vue Meta

Vue Metaでは外部ソースの指定も可能なので、ここで追加することも可能です。

{
  metaInfo: {
    script: [
      { src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000", crossorigin: "anonymous" }
    ]
  }
}

本来は、Vue MetaはGridsomeのベースであるVueアプリケーションがマウントされてからロードされるため、JSが実行される前に挿入が確認されるべき外部ソースの挿入には不適切ですが、Gridsomeの場合はHTMLファイルに書き出されるため、問題にはならないでしょう。