【随時更新】Nuxtの nuxt.config.js での設定について・まとめ

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、Nuxt のnuxt.config.js での設定について、まとめて解説していきます。

1 Nuxt の nuxt.config.js での設定について・まとめ
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 参考・引用
5 Twitterやってます！Follow Me！
6 最近の投稿

Nuxt の nuxt.config.js での設定について・まとめ

実務で、Nuxt.jsを使用しており、nuxt.config.js の設定をいじることがあるので、まとめておきます。

Nuxt のnuxt.config.js での設定には、いろいろあるので、この記事は、随時更新していきたいと思います。

head タグ・metaタグの設定をする

metaタグの情報は、nuxt.config.jsの metaプロパティで設定します。

head: {
    title: "Robotama Project",
    meta: [
      { charset: "utf-8" },
      {
        name: "viewport",
        content:
          "width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no",
      },
      {
        hid: "description",
        name: "description",
        content:
          "Robotama Projectとは、Robotamaを開発する Projectである！",
      },
    ],
  },

lang=”ja” の日本語設定をする

lang=”ja” の日本語設定をするには、次のように htmlAttrs にlang: "ja", を追加します。

head: {
    title: "Robotama Project",
    // 1. htmlAttrs に、lang: "ja", を追加する
    htmlAttrs: {
      lang: "ja",
    },
    meta: [
      { charset: "utf-8" },
      {
        name: "viewport",
        content:
          "width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no",
      },
      {
        hid: "description",
        name: "description",
        content:
          "Robotama Projectとは、Robotamaを開発する Projectである！",
      },
    ],
  },

基本的には、上記の対応で、lang=”ja” の日本語設定をすることができるのですが、

PWAモジュールを一緒に入れていると、そちらがlangの値をenに上書きしてしまいます。

なので、PWAを入れている場合は、PWAのほうのドキュメント通りに設定するとうまく書き変わります。

export default {
  head: {
    htmlAttrs: {
      lang: 'ja',
    },
  },
  // ~~~
  pwa: {
    manifest: {
      lang: 'ja',
    },
  },
}

faviconを設定する

faviconを設定する場合は、favicon画像はstaticディレクトリに配置します。

次のように、href: "/favicon.ico"とした場合、static/favicon.icoのファイルが呼び出されるようになります。

head: {
    title: "Robotama Project",
    script: [
      {
        src: "https://accounts.google.com/gsi/client",
        defer: true,
        async: true,
      },
    ],
    htmlAttrs: {
      lang: "ja",
    },
    meta: [
      { charset: "utf-8" },
      {
        name: "viewport",
        content:
          "width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no",
      },
      {
        hid: "description",
        name: "description",
        content:
          "Robotama Projectとは、Robotamaを開発する Projectである！",
      },
    ],
    // 1. link で、faviconを設定する
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
  },

Cache-Controlの無効化設定を metaタグに追加する

metaタグに、次のような設定を追加すると、Page (HTML) のキャッシュを無効にすることができます。

この設定はhead要素の中で使用します。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

Nuxtの場合は、metaタグに次のような設定を追加します。

head: {
    title: "Robotama Project",
    meta: [
      { charset: "utf-8" },
      {
        name: "viewport",
        content:
          "width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no",
      },
      // 1. Metaタグで、Page_Cache を無効化する設定_1
      {
        httpEquiv: 'Pragma',
        content: 'no-cache',
      },
      // 2. Metaタグで、Page_Cache を無効化する設定_2
      {
        httpEquiv: 'Cache-Control',
        content: 'no-cache',
      },
    ],
  },