【Nuxt】JSやCSS、Webフォントなどの外部リソースを全てのページで使用する

はじめに

この記事では、Nuxt.jsでCDNで配布されているJSやCSS、webフォントなどの外部リソースを使用するための設定方法について紹介します。

アプリケーション全体で使用するグローバルな設定の場合は、「nuxt.config.js」でリソースをインクルードします。

例としてGoogleが提供するRobotoのWebフォントをグローバルにインクルードを紹介します。

一般的なHTMLのヘッダ内部でリソースを参照する場合は、次のように設定します。

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

これを「nuxt.config.js」で書く場合は、次のようになります。

export default {
  head: {
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
    ]
  }
}

head内のlinkで定義されている配列に上記のようなオブジェクトを設定することで、すべてのページでリソースをインクルードすることができます。

今度はHTMLのヘッダで次のように設定するscriptを「nuxt.config.js」で書き換える例を示します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

JSの場合もCSSのときと同様でhead内に書きますが、linkではなくscriptを指定する点が異なります。

export default {
  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js' }
    ]
  }
}