beta

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

Gridsomeに最適化されていないプラグインを使う場合など、外部スクリプトやCSSをロードしたい時があります。Gridsomeでは簡単に外部ソースの追加ができる仕組みが用意されているのでそちらを使った対処方法をまとめました。

公開日:2022年5月19日

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

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ファイルに書き出されるため、問題にはならないでしょう。

Author

Koji Kadoma
Member of codit.work

新着ノート

新着コード