NuxSaaSのページ構成

このドキュメントでは、NuxSaaSがページの内容やコンポーネントをどのように構成しているか、その理由について説明します。例として app/pages/admin/user ページを参照します。

NuxSaaSのページ構成方法

NuxSaaSの各ページは、Nuxtのファイルベースルーティングに従い、app/pages/ 配下のディレクトリとして表現されます。例：

app/pages/admin/user/
├── components/
    ├── BanUserModal.vue
    ├── CreateUserModal.vue
├── i18n.json
├── index.vue

index.vue: ページのメインVueコンポーネント
i18n.json: ページ固有の翻訳文字列
その他、モジュール化のためにcomposablesやサブコンポーネントなどの追加ファイルを含めることができます

Nuxtのページ検出とカスタムルーティング動作

デフォルトでは、Nuxtは app/pages/ 配下のすべてのファイルやディレクトリをルートとして扱い、ファイルベースルーティングシステムに従って各ファイルにページを自動生成します。つまり、カスタマイズしない場合、ページディレクトリ内の components などのサブディレクトリ内のファイルも個別のページとしてルーティングテーブルに含まれてしまいます。

しかし、NuxSaaSでは nuxt.config.ts でルーティング動作をカスタマイズしています。フックを使い、パスに component または /api を含むルートを除外するようにしています。そのため、app/pages/ 配下の任意のページディレクトリ内の components ディレクトリ（例：app/pages/admin/user/components/）内のファイルはページとして扱われず、ルートも生成されません。index.vue などの主要ファイルや、除外されていないファイルのみがページとして登録されます。

このアプローチにより、components フォルダ内のサブコンポーネントやユーティリティファイルは、そのページ専用の内部的な部品としてのみ利用され、独立したルートとして公開されることはありません。

// nuxt.config.ts
hooks: {
  'pages:extend': function (pages) {
    const pagesToRemove: NuxtPage[] = []
    pages.forEach((page) => {
      if (page.path.includes('component') || page.path.includes('/api')) {
        pagesToRemove.push(page)
      }
    })
    pagesToRemove.forEach((page: NuxtPage) => {
      pages.splice(pages.indexOf(page), 1)
    })
  }
}

なぜこの構成なのか？

スケーラビリティ: 各ページが自己完結しているため、他のページに影響を与えずに追加・変更・削除が容易です。
保守性: ローカライズされたi18nファイルやモジュール化されたコンポーネントにより、コードが整理され、更新も簡単です。
関心の分離: ビジネスロジック、UI、翻訳が明確に分離されています。

結論

この構成により、NuxSaaSは各ページを堅牢で保守しやすく、拡張も容易にし、ユーザーと開発者の両方にとってシームレスな体験を提供します。

NuxSaaSのページ構成 ​