Understanding the Project Structure

A Nuxt 3 project typically follows a specific folder structure. During installation, some folders are created automatically, while others need to be manually created based on the project’s requirements. Below is a guide to the main folders and files, along with their purposes:

These folders are generated when you install Nuxt 3:

• nuxt.config.ts: Nuxt configuration file.
• package.json: Contains project metadata and dependencies.
• tsconfig.json: TypeScript configuration file.
• .nuxt: Auto-generated build files (do not edit).
• node_modules: Installed dependencies.
• public: Static assets like images, fonts, and favicons.
• app.vue: The main Vue component that acts as the root component for your application.

Folders You Need to Create Manually

Some folders are not included by default but are commonly needed in Nuxt 3 projects:

• assets: Contains uncompiled assets that will be processed by the build tool (e.g., stylesheets, images, and icons).
• components: Contains Vue components that help in writing clean, reusable, and maintainable code (e.g., a button component that can be used across pages).
• composables: Stores reusable functions built with Vue’s Composition API to manage shared logic across multiple components (e.g., API call functions, error handling functions).
• plugins: Contains JavaScript plugins that need to be run before instantiating the root Vue.js application.
• store: Initializes Pinia for global state management to store things like auth tokens and user data.
• middleware: Contains custom middleware functions that run before rendering a page or a group of pages.
• layouts: Contains layout components that wrap around page components.
• .env: Contains environment variables for managing configuration settings securely (e.g., base URL).

Example Structure

my-nuxt-app/
├── assets/
│   ├── css/
│   ├── icons
│   └── images
├── components/
│   ├── base/
│   │   └── customIcon.vue
│   │   └── button.vue
│   │   └── loader.vue
│   ├── input/
│   │   └── formSelect.vue
│   │   └── formText.vue
│   ├── header.vue
│   └── Footer.vue
├── pages/
│   ├── index.vue
│   ├── users/
│   │   └── [id].vue
│   └── dashboard.vue
├── composables/
│   ├── api.js
│   └── endpoints.js
│   └── error.js
│   └── reUseFunctions.ts
├── layouts/
│   └── default.vue
├── middleware/
│   └── auth.ts
├── plugins/
│   └── primevue.js
├── public/
│   └── favicon.ico
├── server/
│   └── api/
│       └── users.ts
├── stores/
│   └── user.ts
├── types/
│   └── index.ts
├── app.vue
├── nuxt.config.ts
├── package.json
├── tsconfig.json
└── .env