Vue 3 Nuxt 3 (SSR) Standards · NUXT

The following is a default Vue Project structure:

• components/: Vue.js components.
• composables/: Reusable composition functions (Composables).
• content/: Content files for Nuxt Content module.
• layouts/: Layouts for the application.
• middleware/: Custom middleware.
• pages/: Page components.
• plugins/: Vue plugins.
• public/: Static files (directly served).
• server/: Server middleware and API routes.
  • api/: API routes.
  • middleware/: Server middleware.
• stores/: Pinia stores (if using Pinia for state management).

Use consistent naming conventions (e.g. PascaleCase, camelCase, kebab-case) for directories, components and utils.

This must be a project-level decision.

Limit Component Nesting to a Maximum of Two Folders for Readable and Manageable Auto-Imports · NUXT-01.3 · MUST

Ensure that Component names remain intuitive and uncumbersome by limiting nesting.

Nuxt 3 component naming example (✅)

components/
├── layout/
│   ├── Header.vue
│   └── Footer.vue
├── ui/
│   ├── buttons/
│   │   └── PrimaryButton.vue
│   └── cards/
│       └── InfoCard.vue

<LayoutHeader />
<UiButtonsPrimaryButton />

Nuxt 3 component naming example (❌)

components/
├── layout/
│   └── header/
│       └── navigation/
│           └── MainNav.vue

<LayoutHeaderNavigationMainNav />

You can you may disable the path prefix naming in config · EXCEPTION

export default defineNuxtConfig({
  components: [
    {
      path: '~/components',
      pathPrefix: false,
    },
  ],
});

<script lang="ts" setup>
import DeleteModel from "components/user/delete-modal.vue";
</script>


<template>
   <delete-modal></delete-modal>
</template>

Guidance

• Automatically import components
• Allow a semantic distinction between utils and composables

When naming components, don't go more than 3 Layers deep the components folder · NUXT-01.3 · SHOULD

Nuxt 3 Auto Imported Component Example (✅)

-| components/
---| users/
-----| Edit.vue


<template>
  <div>
    <UsersEdit/>
  </div>
</template>

Define Nuxt Endpoints in /server/api/ with Clear Resource-Based Structure · NUXT-01.4 · SHOULD

Create API endpoints in the /server/api/ directory with a resource-based folder structure and meaningful, concise file names that map directly to the URL.

Nuxt 3 Endpoint Structure Example (✅)

server/api/
├── users/
│   ├── index.get.ts      # Handles GET /api/users
│   ├── [id].get.ts       # Handles GET /api/users/:id
│   └── [id].delete.ts    # Handles DELETE /api/users/:id
├── posts/
│   ├── index.get.ts      # Handles GET /api/posts
│   └── [slug].get.ts     # Handles GET /api/posts/:slug

Nuxt 3 Endpoint Structure Example (❌)

server/api/
├── getUsers.ts           # Ambiguous and inconsistent naming
├── deleteUserById.ts     # Does not align with the URL structure
├── post.ts               # Flat structure but unclear intent