nuxt

Nuxt Best Practices

This document outlines the essential guidelines for developing high-quality Nuxt applications. Adhere to these rules to ensure maintainable, performant, and secure code.

1. Code Organization and Structure

Nuxt's convention-over-configuration is a superpower. Leverage it fully.

1.1. Directory Structure

Always follow the Nuxt opinionated directory structure. Do not deviate.

• components/: Reusable Vue components.
• composables/: Reusable Composition API functions (useFoo()).
• layouts/: Application layouts.
• middleware/: Route middleware.
• pages/: Application pages (route definitions).
• plugins/: Nuxt.js plugins.
• server/: API routes and server-side logic.
• store/: Pinia stores.
• utils/: Generic utility functions.

1.2. File Naming Conventions

Consistency is key for auto-imports and readability.

• Components: PascalCase.vue ❌ BAD: my-button.vue ✅ GOOD: MyButton.vue
• Composables: usePascalCase.ts ❌ BAD: fetchData.ts ✅ GOOD: useFetchData.ts
• Pages/Layouts/Middleware/Plugins/Stores: kebab-case.ts or kebab-case.vue ❌ BAD: UserProfile.vue (for a page) ✅ GOOD: user-profile.vue

1.3. TypeScript Adoption

Enable TypeScript everywhere. It prevents bugs and improves developer experience.

• Configure tsconfig.json and ensure ESLint is set up for TypeScript.
• Always explicitly type Pinia stores, middleware, and composables.
• Run nuxt prepare or nuxt dev regularly to generate imports.d.ts for type safety.

2. Component Architecture

Design components for reusability, testability, and clarity.

2.1. Favor Composition over Inheritance

Use the Composition API to organize component logic.

❌ BAD:

<!-- MyComponent.vue -->
<script>
export default {
  mixins: [myMixin], // Avoid mixins
  // ...
}
</script>

✅ GOOD:

<!-- MyComponent.vue -->
<script setup lang="ts">
import { useMyFeature } from '~/composables/useMyFeature';
const { data, loading } = useMyFeature();
</script>