Nuxt

Folder Structure

root
├── 📁 assets
├── 📁 core
│   ├── 📁 components
│   ├── 📁 composables
│   ├── 📁 config
│   ├── 📁 store
│   ├── 📁 services
│   ├── 📁 types
│   └── 📁 utils
│       ├── 📁 validator
│       └── 📄 index.ts
├── 📁 features
│   └── 📁 feature
│       ├── 📁 components
│       ├── 📁 composables
│       ├── 📁 config
│       ├── 📁 services
│       ├── 📁 types
│       └── 📁 utils
├── 📁 middleware
├── 📁 pages
├── 📁 plugins
├── 📁 public
├── 📄 .env.example
├── 📄 .nvmrc
├── 📄 nuxt.config.ts
├── 📄 package.json
└── 📄 README.md

Folder Descriptions

assets/

Contains uncompiled static assets such as SCSS, images, fonts, and icons.
These files are processed by Nuxt's build system (e.g., Sass → CSS).

core/

Houses application-wide core logic that supports all features.

• components/ – Reusable UI components shared across the entire app (e.g., buttons, modals).
• composables/ – Shared composables used globally.
• config/ – Static configuration files (e.g., app settings, constants).
• store/ – Centralized stores using Pinia.
• services/ – API communication logic, e.g., HTTP clients or API handlers.
• types/ – Global TypeScript types/interfaces.
• utils/ – Utility/helper functions used across the app.
  • validator/ – Input validation functions.
  • index.ts – Utility exports or root logic.

features/

Organizes code by domain features. Encourages modular development.

Each feature contains:

• components/ – Feature-specific components.
• composables/ – Local hooks or composition functions.
• config/ – Feature-specific config files.
• services/ – API logic related to the feature.
• types/ – Feature-specific type definitions.
• utils/ – Local helper functions.

Scalable Approach:
This folder pattern supports clean separation of concerns and better feature encapsulation.

middleware/

Custom route middleware functions to guard routes (e.g., authentication checks or redirection logic).

pages/

Nuxt's file-based routing system. Each .vue file here maps to a route.

• Example: pages/index.vue → /
• Supports nested routes with folder nesting.

plugins/

Contains Vue plugins that run before mounting the root Vue app. Examples: Axios, Toast, i18n setup.

public/

Static assets served as-is (not processed by Webpack/Vite). Ideal for robots.txt, favicon, or static files like PDFs.

Root-Level Files

• .env.example – Environment variable template file for developers.
• .nvmrc – Specifies the Node.js version used in the project.
• nuxt.config.ts – Nuxt configuration file (entry point for modules, plugins, routes, etc.).
• package.json – Project metadata and dependencies.
• README.md – Documentation and instructions for the project.