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

Nuxt.js
スポンサー

はじめに

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

外部リソースのインクルード

リソースをグローバルにインクルードする

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

CSSのインクルード

例として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で定義されている配列に上記のようなオブジェクトを設定することで、すべてのページでリソースをインクルードすることができます。

JSのインクルード

今度は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' }
    ]
  }
}

参考

nuxtjs.org
Nuxt.js official website
Nuxt.jsVue.js
スポンサー
フォローする
スポンサー
Public Constructor