【Nuxt】nuxt.config.tsとは？入門者必見のnuxt.config.tsの説明

2024年11月25日Nuxt,TypeScript

kamiです。
TwitterとYoutubeもやってます。

今回は入門者必見のnuxt.config.tsの説明の紹介です。

nuxt.config.tsとは？

nuxt.config.tsは、Nuxt.jsプロジェクト全体の設定を記述するためのファイルです。
このファイルでは、アプリケーションの動作に関わる重要な設定（モジュール、環境変数、ルーティング、ビルド設定など）を一元管理します。

主な役割

  1. 環境ごとの設定管理：開発環境や本番環境で異なる設定を記述できます。
  2. モジュールやプラグインの登録：Nuxt.jsで使用する追加モジュールやプラグインを登録します。
  3. アプリケーションの構成管理：ページのヘッダー情報やCSS、ルーティング設定などを一箇所で管理できます。
  4. ビルドとデプロイの最適化：静的サイト生成やサーバーレンダリングの設定を最適化します。
export default defineNuxtConfig({
  // 環境変数
  env: {
    BASE_PATH: process.env.BASE_PATH || ''
  },
  // サーバーサイドレンダリング設定
  ssr: true,
  // グローバルCSS
  css: ['~/assets/css/global.css'],
  // プラグイン
  plugins: ['@/plugins/apiClient.ts'],
  // モジュール
  modules: ['@nuxtjs/axios', '@nuxtjs/pwa'],
  // ビルド設定
  build: {
    extractCSS: true,
    optimizeCSS: true
  }
});

nuxt.config.ts

nuxt.config.tsについて詳しく説明します

import { defineNuxtConfig } from '@nuxt/types';

export default defineNuxtConfig({
  env: {
    BASE_PATH: process.env.BASE_PATH || ''
  },
  /*
   ** Nuxt rendering mode
   */
  ssr: false,
  /*
   ** Nuxt target
   */
  target: 'static',
  /*
   ** Headers of the page
   */
  head: {
    htmlAttrs: {
      lang: 'ja',
      prefix: 'og: http://ogp.me/ns#'
    },
    title: 'ページのタイトル',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content:
          'descriptionです'
      },
      {
        hid: 'keywords',
        name: 'keywords',
        content:
          'keywordsです'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    script: [
      {
        src: 'https://example.com/custom-library.js'
      },
      {
        id: 'analytics-script',
        src: 'https://analytics.example.com/script.js'
      }
    ]
  },
  /*
   ** Global CSS
   */
  css: [
    '~/assets/css/global.css', // グローバルなCSSファイル
    '~/assets/scss/styles.scss' // SCSSファイル
  ],

  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    '@/plugins/globalMixin.ts',
    '@/plugins/apiClient.ts'
  ],
  /*
   ** Auto import components
   */
  components: true,
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: ['@nuxt/typescript-build', '@nuxtjs/tailwindcss'],
  /*
   ** Nuxt.js modules
   */
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxt/content'
  ],
  /*
   ** Axios configuration
   */
  axios: {
    baseURL: process.env.API_BASE_URL || 'https://api.example.com'
  },
  /*
   ** Content module configuration
   */
  content: {
    dir: 'content',
    liveEdit: false
  },
  /*
   ** Build configuration
   */
  build: {
    extractCSS: true, // CSSを分離してビルド
    optimizeCSS: true // CSSの最適化
  },
  generate: {
    fallback: '404.html' // SPA向けの404ページ
  },
  router: {
    middleware: ['auth']
  },
  tailwindcss: {
    configPath: 'tailwind.config.js', // Tailwind CSSの設定ファイル
    exposeConfig: true
  },
  pwa: {
    manifest: {
      name: 'Hoge',
      lang: 'ja',
      useWebmanifestExtension: false
    }
  }
});

ENV：環境変数

env: {
  BASE_PATH: process.env.BASE_PATH || ''
}
  • 内容：アプリ全体で使用する環境変数を定義します。
  • 用途：APIのベースURLや他の設定値を環境ごとに動的に変更します。

SSR：レンダリングモード

ssr: false
  • 内容：サーバーサイドレンダリング (SSR) を有効にするかどうか。
  • 用途：falseの場合はクライアントサイドでのみレンダリング（SPA）。

TARGET：ターゲット

target: 'static'
  • 内容：静的サイト (static) またはサーバーレンダリング (server) を選択。
  • 用途：静的サイトの場合、ホスティング向けにビルドします。

HEAD：ページヘッダー情報

head: {
  htmlAttrs: {
    lang: 'ja',
    prefix: 'og: http://ogp.me/ns#'
  },
  title: 'ページのタイトル',
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    {
      hid: 'description',
      name: 'description',
      content: 'descriptionです'
    },
    {
      hid: 'keywords',
      name: 'keywords',
      content: 'keywordsです'
    }
  ],
  link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  script: [
    { src: 'https://example.com/custom-library.js' },
    { id: 'analytics-script', src: 'https://analytics.example.com/script.js' }
  ]
}
  • TITLE：ブラウザタブや検索エンジンに表示されるページタイトル。
  • META：
    • DESCRIPTION：検索エンジンでのページ説明文。
    • KEYWORDS：ページの関連キーワード（現在は評価対象外）。
  • LINK：アイコンや外部リソースへのリンク。
  • SCRIPT：外部スクリプトを追加します。

CSS：グローバルスタイル

css: [
  '~/assets/css/global.css',
  '~/assets/scss/styles.scss'
]
  • 内容：アプリ全体で適用されるCSSやSCSSファイルを指定します。

PLUGINS：プラグイン

plugins: [
  '@/plugins/globalMixin.ts',
  '@/plugins/apiClient.ts'
]
  • 内容：Nuxtアプリで使用するプラグインを定義します。
  • 用途：
    • globalMixin.ts：Vueのグローバルミックスインを登録。
    • apiClient.ts：APIクライアントの初期化。

COMPONENTS：コンポーネント自動インポート

components: true
  • 内容：手動でインポートせずにコンポーネントを利用可能にします。

BUILD_MODULES：開発モジュール

buildModules: ['@nuxt/typescript-build', '@nuxtjs/tailwindcss']
  • 内容：開発用モジュールを設定します。
  • 用途：
    • @nuxt/typescript-build：TypeScriptのサポート。
    • @nuxtjs/tailwindcss：Tailwind CSSのサポート。

MODULES：モジュール

modules: [
  '@nuxtjs/axios',
  '@nuxtjs/pwa',
  '@nuxt/content'
]
  • 内容：Nuxtで使用する外部モジュールを定義します。
  • 用途：
    • @nuxtjs/axios：HTTPリクエストの簡略化。
    • @nuxtjs/pwa：PWA機能の追加。
    • @nuxt/content：MarkdownやJSONデータを利用。

AXIOS：HTTPクライアント設定

axios: {
  baseURL: process.env.API_BASE_URL || 'https://api.example.com'
}
  • 内容：HTTPクライアントaxiosの基本設定を記述します。

CONTENT：コンテンツ設定

content: {
  dir: 'content',
  liveEdit: false
}
  • 内容：Nuxt Contentモジュールの設定。
  • 用途：
    • DIR：コンテンツのディレクトリ名。
    • LIVE_EDIT：リアルタイム編集の有効化/無効化。

BUILD：ビルド設定

build: {
  extractCSS: true,
  optimizeCSS: true
}
  • 内容：アプリのビルド設定。
  • 用途：
    • EXTRACT_CSS：CSSを別ファイルに分離。
    • OPTIMIZE_CSS：CSSの最適化。

GENERATE：静的生成設定

generate: {
  fallback: '404.html'
}
  • 内容：静的サイト生成時の設定。
  • 用途：SPA向けの404ページを指定。

ROUTER：ルーター設定

router: {
  middleware: ['auth']
}
  • 内容：アプリケーションのルーター設定。
  • 用途：ルートごとに認証ミドルウェアを追加。

TAILWINDCSS：Tailwind CSS設定

tailwindcss: {
  configPath: 'tailwind.config.js',
  exposeConfig: true
}
  • 内容：Tailwind CSSの設定。
  • 用途：
    • CONFIG_PATH：設定ファイルのパス。
    • EXPOSE_CONFIG：設定をアプリ内で利用可能にする。

PWA：プログレッシブウェブアプリ設定

pwa: {
  manifest: {
    name: 'Hoge',
    lang: 'ja',
    useWebmanifestExtension: false
  }
}
  • 内容：PWA用のマニフェストを設定。
  • 用途：アプリ名や言語設定を記述。

以上、nuxt.config.tsの説明でした。

Nuxt,TypeScriptNuxt

Posted by kami