【2025版】Nuxt 最適フォルダ(ディレクトリ)構成・設計の話
Nuxtに悩んでる人へ！
Nuxtを勉強している人やNuxtを開発で使っている人、あとは人気のVue.jsを勉強している人などなど...
実はVueやNuxtでWebアプリを開発する機会って意外と多く、フロント開発の案件数も上位Top5に入るほどです。そんな中、Nuxtの使い方や効率的な方法を探している人もいるかなと思ったので、
そこで今回は、僕が採用しているディレクトリ(フォルダ)構成を共有します。この記事がNuxtのディレクトリ構成に悩む開発者の助けになれば幸いです。
また、「コレが正解だぁ！」ってわけじゃないので、
「私はこういうディレクトリー構成です」って人は是非教えてください！
※Nuxt4でのお話になります。
自己紹介
どうも！現役でエンジニアやってるやむぅ。です！フリーランスエンジニアとして働きながら、 「個人サービス運営」「エンジニアサポート」「YouTube発信」この三つを主軸に活動しています。直近では、「YouTubeをNuxt x FastAPI x MySQLで作ってみた」や「WebニュースのAI分析サービスのリリース」「Twitchクリップの検索・シェアサービスのリリース」をしました。
僕がエンジニアとして、失敗したことや上手くいったこと、実際に行動したことなどをもとに書いてるので、ぜひ参考にしてください！
Next.js最適ディレクトリ構成【2025年版】
nuxt-project/
├── app/
│ ├── assets/
│ ├── components/
│ ├── composables/
│ ├── layouts/
│ ├── middleware/
│ ├── pages/
│ │ └── hello/
│ │ └── index.vue
│ ├── plugins/
│ ├── app.vue
│ └── error.vue
│
├── public/
├── server/
├── shared/
├── tests/
│
├── nuxt.config.ts
├── package.json
└── tsconfig.json
解説
app
Nuxt4で導入されたappディレクトリ。以前の「pages」や「components」など、主にアプリケーションのクライアント関係のコードがここに入る。より直感的で管理しやすいアプリケーション構造を実現することができる。
assets
assetsディレクトリは、スタイルシート、画像、フォントなどの静的なアセットを格納する場所です。
├── app/
│ ├── assets/
│ │ ├── fonts/
│ │ │ └── ●●●.ttf
│ │ ├── imgs/
│ │ │ └── ●●●.webp
│ │ └── scss/
│ │ └── index.scss
components
componentsディレクトリは、よく使う部品を置く場所です。詳しくいうと、再利用可能なUIコンポーネントとレイアウト関連のコンポーネントを格納します。僕は基本的にAtomic Designを使っています。これに関しては以下の記事がめちゃくちゃわかりやすい&イメージしやすいです。
他にもfeaturesフォルダーで機能ごとに作る人もいれば、全てをベタ入れする人もいたりもします。
どちらにせよ、汎用的に部品として使えるような構造でわかりやすければそれでOKです！
├── app/
│ ├── components/
│ │ ├── atoms/ ←一番小さな部品はここ
│ │ │ ├── OshaInput.vue
│ │ │ ├── OshaButton.vue
│ │ │ └── OshaIcon.vue ←そのコンポのUIを実装
│ │ ├── molecules/ ←atomsの集合体のイメージ
│ │ │ └── OshaInputCell.vue ←OshaInputとOshaButtonを組み合わせた入力パーツ
│ │ ├── organisms/ ←moleculesとかの集合体のイメージ
│ │ │ └── OshaInputForm.vue ←osha-input-cellを集めた入力フォームパーツ
│ │ └── templetes/ ←organismsとかの集合体のイメージ
│ │ └── OshaContactForm.vue ←osha-input-formをつかったお問い合わせフォーム
composables
componentsディレクトリは、よく使う処理・機能のうちComposition APIを使用した再利用可能なロジック（composable）を置きます。再利用可能ロジックをここで定義しておくことで、コードの重複を避け、スッキリできます。
├── app/
│ ├── composables/
│ │ ├── useMobile.tsx ←画面サイズがモバイルの時の処理とか
│ │ └── supabase/ ←フォルダーでまとめることも可能
│ │ ├── useAuth.tsx ←認証系の処理
│ │ └── useUser.tsx ←ユーザーのCRUD処理とか
layouts
layoutsディレクトリは、アプリの共通レイアウトを設定するファイルを置きます。
├── app/
│ ├── layouts/
│ │ ├── default.vue ←デフォルトで反映されるレイアウト
│ │ └── custome.vue
middleware
middlewareディレクトリは、ページやレイアウトがレンダリングされる前に実行されるカスタム関数を実装することができます。
├── app/
│ ├── middleware/
│ │ ├── analytics.global.ts ←全体で適用される(グローバルミドルウェア)
│ │ └── my-middleware.ts
pages
pagesディレクトリは、ページとなるファイルを置きます。各Vueファイルは対応するルートになります。
├── app/
│ ├── pages/
│ │ ├── blogs/
│ │ │ ├── index.vue ←/blogsのページを実装
│ │ │ └── [id]/
│ │ │ └── page.vue ←/blogs/1とかのページを実装
│ │ ├── about.vue ←/aboutのページを実装
│ │ └── page.vue ←最初のトップのページを実装
plugins
pluginsディレクトリは、Vue プラグインなどを使用するためのディレクトリです。
public
publicディレクトリは、静的ファイルを格納するためのディレクトリです。これらのファイルはそのままのパスで公開されます。
server
serverディレクトリは、APIなどのサーバーサイドのロジックを格納します。
├── server/
│ ├── api/
│ │ └── hello.ts # /api/hello
│ ├── middleware/
│ ├── plugins/
│ └── routes/
│ └── hello.ts # /hello
shared
sharedディレクトリは、クライアントとサーバー間で機能を共有することができるutils関数や型(types)を定義することができるディレクトリです。
├── shared/
│ ├── utils/
│ │ └── formatters.ts ←クライアント、サーバー両方で使える
│ └── types/
│ └── user.d.ts ←クライアント、サーバー両方で使える
tests
testsディレクトリは、テストコードを格納するディレクトリです。
(おまけ)他にも...
stores
├── stores/
│ ├── userStore.ts ←ユーザーに関する全体共有データについて
│ └── blogStore.ts ←ブログ情報に関する全体共有データについて
storesディレクトリは、グローバルステートの管理するためのコードを配置します。簡単にいうと、アプリケーション全体で共有されるデータを管理するためのものです。
公式ではpiniaが推奨されています。
constants
├── constants/
│ └── constant.ts ←固定値・定数を定義
constantsディレクトリは、固定値を置く場所です。
featuresディレクトリ(大規模プロジェクトで活躍)
featuresディレクトリを使うと、ドメインを意識した開発ができるというのが僕の印象です。もうちょっと簡単にいうと「UI + コンポーネントをまとめたもの」として、特定の機能やドメインごとにページ系やコンポーネントを実装できるので、機能ごとでの管理が容易になるようです。
そのため、今までの構成は「全体的に汎用的になるような構成(全体共通のcomponentsを一箇所で管理)」だったが、featuresを使うことで「機能ごとで個々に構成(全体共通ではなく、機能ごとに各所に散らばる)」になると感じました。
├── app/
│ ├── features/
│ │ ├── blog/ ←ブログの機能に関するものはここ
│ │ │ ├── pages/
│ │ │ └── components/
│ │ └── auth/ ←認証に関するものはここ
│ │ ├── pages/
│ │ └── components/
│ ├── components/ ←全体共通のコンポーネントも定義可能
【最後に告知！】定期『ワークショップ』のご案内🔥
「プログラミングを始めたいけど、何から手をつけていいか分からない…」
「本や動画を試したけれど、途中で挫折してしまった…」
「HTML、CSS、JavaScriptの役割がごちゃごちゃになって、全体像が掴めない…」
そんなプログラミング未経験・初心者向けに「プログラミングのイメージを掴む」ことができるワークショップを開催します！
- HTML、CSS の基礎が学べる 「最初の一歩」
- Java/Go/Python の基礎が学べる 「システムエンジニアへの道」
- 流行りのフレームワークReactやVueの実践開発体験
- 人気バックエンドスキルの実践開発体験
…etc とさまざまなワークショップを定期的に開催します。
独学で詰まってる方や、エンジニアのリアルを知りたい・体験したいプログラミング未経験・初心者の方はぜひご参加ください！
お申し込みはこちらから
👉 開催予定のワークショップを確認する(Googleフォームに移動します)
【もひとつ告知！】僕が1 on 1でプログラミング教えます👋
エンジニアのリアルを体験 & AIの使い方を網羅したカリキュラムを実際の開発案件をもとに作り上げました！
またスクール関係なしにも、プログラミングに興味ある・エンジニアを目指す方向けに、1on1で個別相談を実施しています。プログラミング初心者の方やリスキリングを考えている方はぜひ！
Discussion