In a Nuxt3 project, the naming conventions for files and components can vary, but a commonly accepted and effective approach is as follows:

1. File Naming Conventions

PascalCase for Components

• Use PascalCase (e.g., MyComponent.vue) for Vue component files. This convention makes it clear that the file represents a component.
• Example:
  • HeaderComponent.vue
  • FooterComponent.vue
  • UserProfile.vue

camelCase for Non-Component Files

• Use camelCase (e.g., myFile.ts) for other files such as JavaScript, TypeScript, and CSS files. This convention helps differentiate these files from component files.
• Example:
  • apiClient.ts
  • storeIndex.ts
  • helperFunctions.ts
  • style.css

2. Directory Naming Conventions

• Use kebab-case for directory and sub-directy names to maintain consistency and readability.
• Example:
  • components/datatable
  • pages/
  • store/
  • layouts/

3. Classes and Objects Naming Conventions

PascalCase for classes & types

• Use PascalCase for classes names to maintain consistency and readability.
• Example:
  • DatatableTypes.ts

camelCase for variables, composables and objects

• Use camelCase for variables, composables and objects names to maintain consistency and readability.
• Example:
  • useDatatableStore

import { defineStore } from 'pinia'

export const useDatatableStore = defineStore('datatable', {
  state: () => ({}),
})

4. Examples of Naming in a Nuxt3 Project Structure

File Structure Example

components/
  user-interface/
    HeaderComponent.vue
    FooterComponent.vue
    UserProfile.vue

pages/
  index.vue
  about.vue
  contact.vue

store/
  index.js

plugins/
  apiClient.ts

assets/
  styles.css
  images/

layouts/
  default.vue

middleware/
  auth.ts

public/
  favicon.ico