Nuxt 3 TypeScript Nuxt UI Best Practices: Essential Coding Rules for Vue Developers

1. **Prioritize Clean and Modular TypeScript Code**: Craft readable, scalable TypeScript that favors functional and declarative styles over classes. Break down logic into reusable modules to adhere to DRY principles and reduce repetition.

2. **Leverage Composition API with <script setup>**: Always opt for the Composition API in <script setup> format for components. Extract shared client-side logic and state into composables for reuse across your Nuxt app.

3. **Harness Nuxt 3 Auto-Imports**: Skip manual imports for essentials like ref, useState, or useRouter since Nuxt 3 handles them automatically. Integrate VueUse utilities for enhanced reactivity, but rely on @nuxtjs/color-mode and useColorMode() for theme switching.

4. **Handle Server-Side Tasks Securely**: Place database ops, auth, and sensitive logic in the server/api directory. Access environment-specific configs via useRuntimeConfig() for seamless server-client usage.

5. **Optimize SEO and Assets**: Implement useHead() and useSeoMeta() for metadata. Use <NuxtImage> or <NuxtPicture> for images, Nuxt Icons module for icons, and app.config.ts for global theme settings.

6. **Master Data Fetching Strategies**:
   - Employ useFetch() for SSR-friendly fetches with auto-caching and URL-reactive updates.
   - Choose $fetch() for client-only calls in handlers without SSR needs.
   - Apply useAsyncData() for advanced scenarios like multi-API merges or custom error/caching logic.
   - Add server: false to skip SSR, or lazy: true to delay non-essential loads post-render.

7. **Adopt Consistent Naming Patterns**: Name composables as useMyComposable(). Use PascalCase for component files (e.g., MyComponent.vue). Stick to named exports for functions to improve clarity.

8. **Excel in TypeScript Practices**: Define interfaces preferentially over types for superior extensibility. Replace enums with maps for safer, more adaptable typing. Build functional components with strong TypeScript integration.

9. **Build Responsive UIs with Nuxt UI and Tailwind**: Combine Nuxt UI components with Tailwind CSS for styling. Apply mobile-first responsive designs using Tailwind utilities for adaptive layouts.