# Vue 3 Nuxt 3 (SSR) Standards · NUXT

## Standard Metadata

- Area: Vue
- Owner: Frontend Steering Group
- Last reviewed: 2026-09-09
- Next review due from: 2026-12-01
- Enforcement: ESLint / code review
- Status: Active

## Files Must be Organised According to the Nuxt Project Structure · NUXT-01.1 · **MUST**

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).

## Ensure Consistent Naming Conventions Across All Files and Directories · NUXT-01.2 · **MUST**

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 (✅)

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

<LayoutHeader />
<UiButtonsPrimaryButton />
```

#### Nuxt 3 component naming example (❌)

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

<LayoutHeaderNavigationMainNav />
```

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

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

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

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

#### Guidance

- [Automatically import components](https://nuxt.com/docs/guide/directory-structure/components)
- [Allow a semantic distinction between utils and composables](https://nuxt.com/docs/guide/directory-structure/utils)

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

#### Nuxt 3 Auto Imported Component Example (✅)

```ts
-| 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 (✅)

```ts
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 (❌)

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