NuxtJS Vue 3 TypeScript Best Practices: Coding Standards and Optimization Guide

### Context
These guidelines provide a comprehensive framework for building scalable, performant NuxtJS applications with Vue 3's Composition API and strict TypeScript practices. They emphasize modularity, readability, and optimization, leveraging tools like Shadcn Vue, Radix Vue, VueUse, Pinia, and Tailwind CSS. Ideal for developers aiming for production-ready apps with excellent Web Vitals, SEO, and responsive design.

### Rules
#### Code Organization and Style
- Craft succinct, precise TypeScript code prioritizing Composition API over Options API for declarative logic.
- Eliminate redundancy by favoring loops, reusable composables, and modular helpers.
- Adopt meaningful names incorporating state descriptors (e.g., `isActive`, `fetchingData`).
- Organize files logically: primary exports first, followed by composables, utilities, static assets, and type definitions.

#### Naming Standards
- Employ kebab-case for folders (e.g., `user-profile`).
- Use PascalCase for Vue components (e.g., `UserProfile.vue`).
- Stick to camelCase for composables and functions (e.g., `useUserProfile.ts`).

#### TypeScript Practices
- Mandate TypeScript everywhere, favoring `type` aliases over `interface`.
- Replace enums with frozen const objects for better tree-shaking.
- Integrate Vue 3 TypeScript support via `defineComponent` and `PropType` for props.

#### Syntax and Code Formatting
- Default to arrow functions in methods, getters, and computed refs.
- Omit braces in single-line if/else for brevity; prefer ternary operators.
- Rely on Vue templates for reactive, declarative UI rendering.

#### UI, Styling, and Responsiveness
- Build with Shadcn Vue and Radix Vue primitives, styled via Tailwind CSS.
- Apply mobile-first responsive utilities in Tailwind for adaptive layouts.

#### Performance and Optimization
- Harness Nuxt's native optimizations like auto-imports and hybrid rendering.
- Wrap async components in `<Suspense>` boundaries.
- Enable route-based and component lazy-loading.
- Optimize media: prefer WebP, add explicit dimensions, and lazy-load images.
- Monitor and improve Core Web Vitals (LCP, CLS, INP).

#### Core Tools and State Management
- Integrate VueUse for utilities and Pinia for centralized stores.

#### NuxtJS-Specific Directives
- Adhere to standard Nuxt 3 layout: `pages/`, `components/`, `composables/`, `server/`.
- Utilize auto-imports for seamless component/composable access.
- Implement file-system routing in `pages/` and API routes in `server/`.
- Deploy plugins for app-wide features.
- Fetch data with `useFetch` or `useAsyncData`.
- Enhance discoverability via `useHead` and `useSeoMeta`.

#### Vue 3 Composition API Standards
- Use `<script setup>` for streamlined SFC definitions.
- Manage state with `ref`, `reactive`, and `computed`.
- Apply `provide/inject` for hierarchical data sharing.
- Extract logic into custom composables for reusability.

### Examples
**Composable Example (`useCounter.ts`):**
```typescript
const useCounter = () => {
  const count = ref(0)
  const isLoading = ref(false)
  const increment = async () => {
    isLoading.value = true
    await nextTick()
    count.value++
    isLoading.value = false
  }
  return { count, isLoading, increment }
}
```

**Component Structure (`MyComponent.vue`):**
```vue
<template>
  <div class="p-4 md:p-8">
    <p v-if="isLoading">Loading...</p>
    <p>{{ count }}</p>
    <button @click="increment" class="bg-blue-500 text-white px-4 py-2 rounded">+</button>
  </div>
</template>

<script setup lang="ts">
import { useCounter } from '~/composables/useCounter'

const { count, isLoading, increment } = useCounter()
</script>
```

**Data Fetching with Nuxt (`pages/index.vue`):**
```vue
<template>
  <div>
    <Suspense>
      <DataTable :data="userData" />
    </Suspense>
  </div>
</template>

<script setup lang="ts">
const { data: userData } = await useAsyncData('users', () => $fetch('/api/users'))
useSeoMeta({ title: 'Users Page' }) // SEO optimization
</script>