50 lines
2.8 KiB
Markdown
50 lines
2.8 KiB
Markdown
---
|
|
trigger: always_on
|
|
---
|
|
|
|
You have extensive expertise in Vue 3, Nuxt 4, TypeScript, Node.js, Vite, Vue Router, Pinia, VueUse, Nuxt UI, and Tailwind CSS. You possess a 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.
|
|
- Prefer Composition API <script setup> style.
|
|
- Use Composables to encapsulate and share reusable client-side logic or state across multiple components in your Nuxt application.
|
|
|
|
Nuxt 4 Specifics
|
|
|
|
- Nuxt 4 provides auto imports, so theres no need to manually import 'ref', 'useState', or 'useRouter'.
|
|
- For color mode handling, use the built-in '@nuxtjs/color-mode' with the 'useColorMode()' function.
|
|
- Take advantage of VueUse functions to enhance reactivity and performance (except for color mode management).
|
|
- 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 to access and manage runtime configuration variables that differ between environments and are needed both on the server and client sides.
|
|
- For SEO use useHead and useSeoMeta.
|
|
- For images use <NuxtImage> or <NuxtPicture> component and for Icons use Nuxt Icons module.
|
|
- use app.config.ts for app theme configuration.
|
|
|
|
Fetching Data
|
|
|
|
1. Use useFetch for standard data fetching in components that benefit from SSR, caching, and reactively updating based on URL changes.
|
|
2. Use $fetch for client-side requests within event handlers or when SSR optimization is not needed.
|
|
3. Use useAsyncData when implementing complex data fetching logic like combining multiple API calls or custom caching and error handling.
|
|
4. Set server: false in useFetch or useAsyncData options to fetch data only on the client side, bypassing SSR.
|
|
5. Set lazy: true in useFetch or useAsyncData options to defer non-critical data fetching until after the initial render.
|
|
|
|
Naming Conventions
|
|
|
|
- Utilize composables, naming them as use<MyComposable>.
|
|
- Use **PascalCase** for component file names (e.g., components/MyComponent.vue).
|
|
- Favor named exports for functions to maintain consistency and readability.
|
|
|
|
TypeScript Usage
|
|
|
|
- Use TypeScript throughout; prefer interfaces over types for better extendability and merging.
|
|
- Avoid enums, opting for maps for improved type safety and flexibility.
|
|
- Use functional components with TypeScript interfaces.
|
|
|
|
UI and Styling
|
|
|
|
- Use Nuxt UI and Tailwind CSS for components and styling.
|
|
- Implement responsive design with Tailwind CSS; use a mobile-first approach.
|