Google Fontsは外部CSSを読み込むだけで使えるので手軽ですが、Adobe Fontsなどはダイナミックサブセットを使っているのでスクリプトを埋め込む必要があります。共通のスクリプトを設置する方法を解説します。
nuxt.configに書く
nuxt.config内のheadオブジェクトにページの<head>タグに埋め込むものを設定できます。OGPをはじめとする、<meta>タグや外部CSSはここに記載すれば良いですが、<script>の中身をそのままでは直接を書くことはできません。
__dangerouslyDisableSanitizersを使う
__dangerouslyDisableSanitizersは名前のとおり、危険なサニタイズを無効を実施します。具体的には以下のようなコードになります。
const nuxtConfig = {
head: {
__dangerouslyDisableSanitizers: ["script"],
script: [
{
innerHTML: `CODE HERE`,
type: "text/javascript"
}
]
}
}
innerHTML部分にAdobe Fontsから発行されるコードを貼り付けます。そうすることで各ページにAdobe Fontsのコードを載せることができます。
その他の外部サービスにも使える
Google AdsenseやGoogle AnalyticsはNuxt用のmoduleとして公開されているのでnpmなどから導入することができます。しかし、外部サービスの中にはそうした便利なものがないものも多く、その場合はNuxtの中に自前で組み込む必要があります。
この__dangerouslyDisableSanitizersを使えば外部サービスのコードも貼り付けられるので便利です。ただし、サニタイズは無効になるので、よく分からないコードを貼り付けるのは危険なので注意してください。