Nuxt4 公式モジュール選択ガイド

概要

Nuxt4で新規プロジェクトを構築する際に新たな選択項目の公式モジュール選択についての解説になります。

初期構築を進めていくと下記質問をされます。
こちらの選択肢をYESにすると公式モジュールを導入することができます。

Would you like to install any of the official modules

公式モジュールの選択肢

プロジェクト作成時に選択できる公式モジュールは以下の通りです。

@nuxt/ui: UI Framework 🎨

Webサイトやアプリの見た目を作るための、ボタンやフォームといったUIコンポーネント集です。

• Tailwind CSSがベースになっており、デザインのカスタマイズが簡単
• 初めからアクセシビリティやダークモードに対応

@nuxt/image: Image Optimization 🖼️

サイト上の画像を最適化し、表示速度を向上させます。

• 画像を自動で軽量なWebP形式に変換
• 画面に表示されるまで画像の読み込みを遅らせる遅延読み込み（Lazy Loading）機能

@nuxt/icon: Icon System ✨

様々なアイコンを簡単に使えるようにするシステムです。

• 100種類以上のアイコンセット（Font Awesomeなど）をサポート
• <Icon>コンポーネントで手軽にアイコンを表示

@nuxt/content: Content Management 📝

Markdownファイルなどをブログ記事やドキュメントとして管理・表示するための機能です。

• Markdown、JSON、YAMLファイルをもとにサイトを構築
• コンテンツの全文検索機能を簡単に実装可能

@nuxt/robots: SEO 🤖

robots.txtファイルを自動生成し、Googleなどの検索エンジンにサイトのどのページを巡回（クロール）してよいかを伝えます。
SEO（検索エンジン最適化）の基本的な設定です。

@nuxt/sitemap: SEO 🗺️

サイトの全ページのリストであるsitemap.xml（サイトマップ）を自動で生成します。
検索エンジンがサイトの構造を正確に理解するのを助け、SEOに貢献します。

どのモジュールを選ぶべきか？

プロジェクトの種類に応じたおすすめの組み合わせは以下の通りです。

• ブログ・コンテンツサイト:
  • @nuxt/content、@nuxt/image
• 企業の公式サイト:
  • @nuxt/ui、@nuxt/image、@nuxt/robots、@nuxt/sitemap
• Webアプリケーション:
  • @nuxt/ui、@nuxt/icon
• ポートフォリオサイト:
  • @nuxt/image、@nuxt/content