Nuxt.jsでhead要素・404ページの設定を行う

前提

$ npx create-nuxt-app プロジェクト名 でモジュールをインストールして開始すると、nuxt.config.jsファイルが生成されます。
このファイルで行う設定内容まとめです。

nuxt.config.js ファイル

• export default { ... 以下をJSON形式で記述します。
• アプリケーション共通設定を行う事ができます。

head要素の記述

export default {
  ...
  head: {
    title: "タイトル",
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' },
      /* OGP設定も可能です */
      { property: 'og:title', content: 'OGPタイトル'},
      { property: 'og:type', content: 'website'},
      { property: 'og:url', content: 'OGP URL'},
      { property: 'og:image', content: 'OGP image'},
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      /* CDN等 */
      { rel: 'stylesheet', type: '', href: 'https://fonts.googleapis.com/css?family=Sen&display=swap' }
    ]
  },
  ...
}

ローディングカラーの変更

• Nuxt.jsでは、初期状態でローディングアニメーションが設定されています。
• 好みのカラーへ変更が可能です。

export default {
    ...
    loading: { color: '#カラーコード' },
    ...
}

404ページの設置

• Nuxt.jsでは、/pages配下で自動的にルーティングが行えます。
• 存在しないURLへのアクセスが行われた場合の404リクエストで表示するページ設定を行う事ができます。

export default {
    ...
    router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, './components/404.vue')
      })
    }
  },
  ...
}