Nuxt 3プロジェクトの構造を確認
次に、Nuxt 3のCLIツールで作成できるプロジェクトの構造を確認していきます。
プロジェクトに機能を追加できるさまざまなフォルダー
作成直後のNuxt 3プロジェクトは、図2の通り最低限のファイルだけで構成されます。各ファイルの役割は前回記事を参照してください。
このプロジェクトに特定の名前のフォルダーを作成してファイルを配置することで、さまざまな機能を利用できます。利用できるすべてのフォルダーを配置したプロジェクトは図3の通りとなります（図3のサンプルは各フォルダーを追加しただけで、機能の実装は行っていません。また、pagesフォルダーを生かすため、app.vueをpages/index.vueに移動しています）。
各フォルダーの名前と利用方法の概要を、表1に示します。
| No. | フォルダー名 | 配置されるファイル |
|---|---|---|
| 1 | assets | スタイルシートやフォントなど |
| 2 | components | Webページを構成するコンポーネント（*.vueファイル） |
| 3 | composables | Composition APIによるコンポーネントの実装を記述したJavaScriptファイル |
| 4 | layouts | 複数のコンポーネントやページで共用できるレイアウト（*.vueファイル） |
| 5 | middleware | 特定のルート（パス）へのアクセス時に行う処理を記述したJavaScriptファイル |
| 6 | pages | Webページを構成するページファイル（*.vueファイル） |
| 7 | plugins | プロジェクト全体で使える機能を提供するプラグインのJavaScriptファイル |
| 8 | public | robots.txtやfavicon.icoなど |
| 9 | server | Web APIなど、サーバー側で提供する機能のJavaScriptファイル |
各フォルダーの具体的な利用方法は、必要になった時に本連載で随時紹介します。本記事の後半では、データをWebページに提供するWeb APIを実装するため、No.9のserverフォルダーを利用します。
プロジェクトの設定を記述するnuxt.config.tsファイル
Nuxt 3プロジェクトのさまざまな設定は、nuxt.config.tsファイルにdefineNuxtConfig関数の引数として記述します（デフォルトでは何も記述されていません）。例えば、Webページで共通の<head>要素の内容を、リスト5の通り設定できます。
［リスト5］Nuxt 3プロジェクトの設定ファイル（p003-project/nuxt.config.ts）
export default defineNuxtConfig({
app: {
// <head>要素
head: {
// <meta>要素
meta: [
{
name: 'viewport',
content: 'width=device-width, initial-scale=1'
}
],
// <script>要素
script: [
{ src: 'https://cdn.tailwindcss.com' }
]
}
}
})
defineNuxtConfigで指定できるすべての設定値は、Nuxt 3の公式ドキュメントにリストされています。本連載でも、nuxt.config.tsへ設定が必要になった時に随時説明していきます。
