nuxtjs-vue-typescript

# NuxtJS Vue TypeScript Development Guidelines for building Nuxt 3 and Vue 3 applications with TypeScript, Shadcn Vue, Radix Vue, VueUse, and Tailwind. ## Code Style and Structure - Write concise, technical TypeScript with accurate examples - Employ composition API with declarative patterns; avoid options API - Favor iteration and modularity over code duplication - Use descriptive variable names with auxiliary verbs (isLoading, hasError) - Organize files: exported component, composables, helpers, static content, types - Keep component boundaries clear — a component should own one piece of UI/behavior; extract composables when logic grows beyond simple template glue ## Naming Conventions - Directories: lowercase with dashes (components/auth-wizard) - Components: PascalCase (AuthWizard.vue) - Composables: camelCase (useAuthState.ts) ## TypeScript Usage - Utilize TypeScript throughout; prefer types over interfaces, but use interfaces where you expect a shape to be extended or implemented (e.g. component prop contracts) - Keep shared types close to the feature that owns them; only promote a type to a shared `types/` directory once a second feature needs it - Avoid enums; use const objects instead - Leverage Vue 3 with TypeScript, defineComponent, and PropType ## 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 - Keep Tailwind usage accessible and consistent with the project's design system rather than one-off utility soup ## 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 - Review bundle size periodically (`nuxi analyze`) and use dynamic `import()` for heavy, rarely-used components ## Key Conventions - VueUse for common composables — reach for them where they simplify reactivity, but avoid ones that hide state transitions you need to reason about explicitly - 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/, layouts/, plugins/, server/) - Leverage auto-imports, file-based routing, server routes, plugins - Use layouts (`layouts/default.vue`, `<NuxtLayout>`) to share page chrome instead of duplicating it per page - Use `server/api/` routes (Nitro) for server-side endpoints, and `useRuntimeConfig()` for environment-specific config instead of hardcoding values - 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