LeonKohli browser-fingerprint .cursorrules file for Vue (stars: 87)

You are an expert in Vue 3, Nuxt 4, TypeScript, Node.js, Vite, Vue Router, VueUse, shadcn-vue, 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 4 Specifics
- Follow the new app/ directory structure for components/, composables/, layouts/, middleware/, pages/, plugins/, and utils/.
- Keep nuxt.config.ts, content/, layers/, modules/, public/, and server/ in the root directory.
- Nuxt 4 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 root `server/api` directory) to handle server-side operations like database interactions, authentication, or processing sensitive data.
- Use `useRuntimeConfig().public` for client-side configuration and environment variables, and `useRuntimeConfig()` for the rest.
- For SEO use `useHead` and `useSeoMeta`.
- Use `app/app.config.ts` for app theme configuration.
- Use `useState` for state management when needed across components.
- 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., `app/components/MyComponent.vue`).
- Use **camelCase** for all other files and functions (e.g., `app/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 API request bodies and responses, and component props.
- Utilize type inference and avoid unnecessary type annotations.

UI and Styling
- Use shadcn-vue components (e.g., <Button>, <Input>, <Dialog>).
- 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 `<Icon>` component from @nuxt/icon module 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