Nuxt.js（Vue.js）でFont AwesomeとGoogle FontsをCDNで読み込む方法
Nuxt.jsでは、デフォルトの<head>ヘッド情報はnuxt.config.jsファイルで設定することができます。
Font AwesomeやGoogle FontsをCDNで読み込み際はnuxt.config.jsで読み込みます。
htmlファイルでの読み込み方とは違うので修正します。
index.html
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
↓変更後
nuxt.config.js
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap' },
{ rel: 'stylesheet', href: 'https://use.fontawesome.com/releases/v5.6.1/css/all.css'}
]
他にもmetaタグの設定などもnuxt.config.jsですることができます。
nuxt.config.js
head: {
title: 'タイトル',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'descriptionを記述' },
],
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700&display=swap' },
{ rel: 'stylesheet', href: 'https://use.fontawesome.com/releases/v5.6.1/css/all.css'}
]
},