agent-rules-kit

--- description: Naming conventions for Nuxt applications globs: <root>/app.vue,<root>/components/**/*.vue,<root>/components/**/*.ts,<root>/components/**/*.js alwaysApply: false --- # Nuxt Naming Conventions This document outlines the naming conventions for Nuxt.js applications in {projectPath}. ## Files and Directories ### Vue Components - **Component Files**: Use PascalCase ``` components/ ├── AppHeader.vue ├── BaseButton.vue ├── TheFooter.vue └── UserProfile.vue ``` - **Single-instance components**: Prefix with `The` ``` TheHeader.vue TheFooter.vue TheSidebar.vue ``` - **Base/UI components**: Prefix with `Base` or `App` ``` BaseButton.vue BaseCard.vue AppInput.vue AppCheckbox.vue ``` - **Feature components**: Use domain prefix ``` UserProfile.vue ProductCard.vue CartSummary.vue ``` ### Pages - **Page files**: Use kebab-case for better URL mapping ``` pages/ ├── index.vue ├── about.vue ├── contact-us.vue └── user/ ├── index.vue ├── [id].vue # Dynamic parameter └── profile.vue ``` ### Layouts - **Layout files**: Use kebab-case ``` layouts/ ├── default.vue ├── admin.vue └── auth.vue ``` ### Composables - **Composable files**: Use camelCase with `use` prefix ``` composables/ ├── useAuth.js ├── useCounter.js ├── useFetch.js └── useLocalStorage.js ``` ### Stores (Pinia) - **Store files**: Use camelCase with module name ``` stores/ ├── user.js ├── cart.js ├── products.js └── settings.js ``` - **Store functions**: Use `use` prefix followed by store name and `Store` suffix ```js export const useUserStore = defineStore('user', { /* ... */ }); export const useCartStore = defineStore('cart', { /* ... */ }); ``` ### Server Routes - **API route files**: Use kebab-case for the file and HTTP method suffix ``` server/api/ ├── users/ │ ├── index.get.js # GET /api/users │ ├── index.post.js # POST /api/users │ └── [id].get.js # GET /api/users/:id ├── products.get.js # GET /api/products └── auth/ ├── login.post.js # POST /api/auth/login └── logout.post.js # POST /api/auth/logout ``` ### Middleware - **Middleware files**: Use kebab-case ``` middleware/ ├── auth.js ├── admin-only.js └── redirect-legacy.js ``` - **Global middleware**: Add `.global` suffix ``` middleware/ ├── auth.global.js # Applied to all routes └── analytics.global.js # Applied to all routes ``` ### Plugins - **Plugin files**: Use kebab-case ``` plugins/ ├── api-client.js ├── error-handler.js └── vue-components.js ``` ## Code Conventions ### Component Names - **Component registration**: Use PascalCase in JavaScript/TypeScript ```js import BaseButton from '~/components/BaseButton.vue'; import UserProfile from '~/components/UserProfile.vue'; ``` - **Component usage in templates**: Use kebab-case ```vue <template> <div> <base-button>Click me</base-button> <user-profile :user="user" /> </div> </template> ``` ### Props - **Prop names**: Use camelCase in JavaScript, kebab-case in templates ```js // In component definition const props = defineProps({ itemCount: Number, userName: String, isActive: Boolean, }); ``` ```vue  <user-info :item-count="5" :user-name="userName" :is-active="true" /> ``` ### Events - **Event names**: Use kebab-case for emitted events ```js // In component definition const emit = defineEmits(['update', 'item-selected', 'form-submit']); // Emitting events emit('update', newValue); emit('item-selected', selectedItem); ``` ```vue  <custom-select @update="handleUpdate" @item-selected="handleSelection" /> ``` ### Methods and Functions - **Method/Function names**: Use camelCase ```js function calculateTotal() { /* ... */ } const fetchUserData = async () => { /* ... */ }; const methods = { handleSubmit() { /* ... */ }, validateForm() { /* ... */ }, }; ``` ### CSS Classes - **CSS class names**: Use kebab-case ```vue <template> <div class="user-card"> <div class="user-card__header"> <h2 class="user-card__title">User Profile</h2> </div> <div class="user-card__body"> <p class="user-card__description">Description</p> </div> </div> </template> <style> .user-card { /* ... */ } .user-card__header { /* ... */ } .user-card__title { /* ... */ } </style> ``` ### TypeScript Interfaces and Types - **Interface names**: Use PascalCase ```ts interface User { id: string; firstName: string; lastName: string; email: string; } interface ApiResponse<T> { data: T; status: number; message?: string; } ``` - **Type aliases**: Use PascalCase ```ts type UserRole = 'admin' | 'editor' | 'viewer'; type FormStatus = 'idle' | 'loading' | 'success' | 'error'; ``` ### Constants - **Constants**: Use SCREAMING_SNAKE_CASE for true constants ```js const API_BASE_URL = 'https://api.example.com'; const MAX_RETRIES = 3; const DEFAULT_LOCALE = 'en'; ``` ### Module Imports - **Module imports**: Group and order imports logically ```js // Vue and Nuxt core import { ref, computed } from 'vue'; import { useRoute, useRouter } from 'vue-router'; // Third-party libraries import axios from 'axios'; import { format } from 'date-fns'; // Local modules import { useUserStore } from '~/stores/user'; import BaseButton from '~/components/BaseButton.vue'; import { formatCurrency } from '~/utils/formatters'; ``` ## Nuxt-Specific Conventions ### Auto-imports - Prefer using Nuxt's auto-imports instead of explicit imports for Vue and Nuxt features ```js // Correct - using auto-imports const count = ref(0); const route = useRoute(); // Avoid - explicitly importing what's already auto-imported import { ref } from 'vue'; import { useRoute } from 'vue-router'; const count = ref(0); const route = useRoute(); ``` ### Component Registration - **Dynamic components**: Use the native `<component>` with `:is` ```vue <component :is="dynamicComponent" /> ``` - **Lazy-loaded components**: Prefix with `Lazy` ```vue <LazyCommentSection v-if="showComments" /> ``` ### Folder Structure for Large Applications For larger applications, consider organizing by feature/domain: ``` src/ ├── components/ │ ├── ui/ # Reusable UI components │ │ ├── UiButton.vue │ │ └── UiCard.vue │ └── features/ # Feature-specific components │ ├── auth/ │ │ ├── LoginForm.vue │ │ └── UserMenu.vue │ └── products/ │ └── ProductCard.vue ├── composables/ │ ├── common/ # Shared composables │ │ └── useWindowSize.js │ └── features/ # Feature-specific composables │ └── useAuth.js ├── stores/ │ ├── user.js │ └── products.js └── utils/ ├── formatters.js └── validators.js ```