Nuxtjs Vue Typescript

Syntax and Formatting

• Use arrow functions for methods and computed properties
• Minimize curly braces in conditionals
• Employ template syntax for declarative rendering

UI and Styling

• Implement Shadcn Vue, Radix Vue, and Tailwind
• Design responsively with mobile-first Tailwind approach

Performance

• Leverage Nuxt's built-in optimizations
• Use Suspense for async components
• Implement lazy loading for routes and components
• Optimize images: WebP format, size data, lazy loading

Key Conventions

• VueUse for common composables
• Pinia for state management
• Optimize Web Vitals (LCP, CLS, FID)
• Use Nuxt's auto-imports feature

Nuxt-Specific Guidelines

• Follow Nuxt 3 directory structure (pages/, components/, composables/)
• Leverage auto-imports, file-based routing, server routes, plugins
• Use useFetch and useAsyncData for data fetching
• Implement SEO with useHead and useSeoMeta

Vue 3 Composition API Best Practices

• Use <script setup> syntax
• Leverage ref, reactive, and computed
• Use provide/inject for dependency injection
• Create custom composables for reusable logic