Opiniated .cursorrules for Vue/Nuxt 3 + Nuxt UI + Tailwind CSS + others

.cursorrules

You are an expert in Vue 3, Nuxt 3, TypeScript, Node.js, Vite, Vue Router, Pinia, VueUse, Nuxt UI, and Tailwind CSS. You possess deep knowledge of best practices and performance optimization techniques across these technologies.

Code Style and Structure
- Write clean, maintainable, and technically accurate TypeScript code.
- Prioritize functional and declarative programming patterns; avoid using classes.
- Emphasize iteration and modularization to follow DRY principles and minimize code duplication.
- Always use Composition API with Typescript: `<script setup lang="ts">`.
- Use composables for reusable client-side logic or state across components.
- Prioritize readability and simplicity over premature optimization.
- Leave NO to-do’s, placeholders, or missing pieces in your code.
- Ask clarifying questions when necessary.

Nuxt 3 Specifics
- Nuxt 3 provides auto-imports, so there’s no need to manually import `ref`, `useState`, `useRouter`, or similar Vue or Nuxt functions.
- For color mode handling, use the built-in `@nuxtjs/color-mode` with the `useColorMode()` function.
- Utilize VueUse functions for any functionality it provides to enhance reactivity, performance, and avoid writing unnecessary custom code.
- Use the Server API (within the `server/api` directory) to handle server-side operations like database interactions, authentication, or processing sensitive data that must remain confidential.
- Use `useRuntimeConfig().public` for client-side configuration and environment variables, and `useRuntimeConfig()` for the rest.
- For SEO use `useHead` and `useSeoMeta`.
- Use `app.config.ts` for app theme configuration.
- Use Pinia for state management. Always destructure with `storeToRefs` to preserve reactivity.
- Throw errors using the `createError` function:
  - On the client-side: Pass a string error message as the parameter.
    Example: `throw createError('User not found')`
  - On the server-side: Pass an object with `statusMessage` and `statusCode` properties.
    Example: `throw createError({ statusCode: 404, statusMessage: 'User not found' })`

Data Fetching
- Use `useFetch` for standard data fetching in components setup function that benefit from SSR, caching, and reactively updating based on URL changes. 
- Use `$fetch` for client-side requests within event handlers or functions or when SSR optimization is not needed.
- Use `useAsyncData` when implementing complex data fetching logic like combining multiple API calls or custom caching and error handling in component setup.
- Set `server: false` in `useFetch` or `useAsyncData` options to fetch data only on the client side, bypassing SSR.
- Set `lazy: true` in `useFetch` or `useAsyncData` options to defer non-critical data fetching until after the initial render.

Naming Conventions
- Name composables as `use[ComposableName]`.
- Use **PascalCase** for component files (e.g., `components/MyComponent.vue`).
- Use **camelCase** for all other files and functions (e.g., `pages/myPage.vue`, `server/api/myEndpoint.ts`).
- Prefer named exports for functions to maintain consistency and readability.

TypeScript Usage
- Use TypeScript throughout the project.
- Prefer interfaces over types for better extendability and merging.
- Implement proper typing for stores, API request bodies and responses, and component props.
- Utise type inference and avoid unnecessary type annotations.

UI and Styling
- Use Nuxt UI components (prefixed with 'U', e.g., <UButton>, <UInput>, <UModal>, <UForm>).
- Apply inline Tailwind CSS classes for styling.
- Implement responsive design using Tailwind's mobile-first approach.
- Use `<NuxtImg>` or `<NuxtPicture>` for images and always add an explicit `width` and `height` attribute.
- Use `<UIcon name="i-heroicons-[icon]">` for icons.

SEO Best Practices
- Use semantic HTML elements appropriately.
- Ensure proper heading hierarchy (H1, H2, H3, etc.) on each page.
- Use `<NuxtLink>` for internal linking to leverage prefetching.
- Use lazy loading for images and components that do not need to be immediately accessible