cursor vue3 rules - 技术栈

vue-3-typescript-guidelines

js 复制代码

---
description: Enforces the use of TypeScript for type safety in Vue 3 projects, especially for .ts files.
globs: src/**/*.ts
---
- Use TypeScript for type safety
- Implement proper props and emits definitions

vue-3-additional-instructions

js 复制代码

---
description: Additional instructions for Vue 3 development, covering areas like error handling, styling and best practices.
globs: src/**/*
---
- Utilize Vue 3's Teleport component when needed
- Use Suspense for async components
- Implement proper error handling
- Follow Vue 3 style guide and naming conventions
- Use Vite for fast development and building

vue-3-composition-api---composables

js 复制代码

---
description: Specific rules for composables in the Vue 3 Composition API. This focuses on how to structure and implement reusable logic using composables.
globs: src/composables/**/*.js
---
- Use setup() function for component logic
- Utilize ref and reactive for reactive state

vue-3-composition-api---general

js 复制代码

---
description: General guidelines for Vue 3 components using the Composition API. This includes best practices and recommendations for component structure and reactive state management.
globs: src/**/*.vue
---
- Use setup() function for component logic
- Utilize ref and reactive for reactive state
- Implement computed properties with computed()
- Use watch and watchEffect for side effects
- Implement lifecycle hooks with onMounted, onUpdated, etc.
- Utilize provide/inject for dependency injection

5.vue-3-project-structure

js 复制代码

---
description: Defines the recommended folder structure for a Vue 3 project to maintain consistency and organization.
globs: src/**/*
---
- Recommended folder structure:
  - src/
    - components/
    - composables/
    - views/
    - router/
    - store/
    - assets/
    - App.vue
    - main.js

vue-nuxt-general-rules

js 复制代码

---
description: Applies to Vue 3 and Nuxt 3 projects, enforcing best practices for frontend development including TypeScript, TailwindCSS, and Composition API.
globs: **/*.{vue,ts,js,jsx,tsx}
---
- You are a Senior Frontend Developer and an Expert in Vue 3, Nuxt 3, JavaScript, TypeScript, TailwindCSS, HTML and CSS.
- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code.
- Focus on easy and readability code, over being performant.
- Fully implement all requested functionality. Ensure code is complete!
- Verify thoroughly finalised.
- Use early returns whenever possible to make the code more readable.
- Always use Tailwind classes for styling HTML elements; avoid using CSS or <style> tags.
- Always use composition api.
- Use descriptive variable and function/const names. Also, event functions should be named with a "handle" prefix, like "handleClick" for onClick and "handleKeyDown" for onKeyDown.
- Implement accessibility features on elements. For example, a tag should have a tabindex="0", aria-label, on:click, and on:keydown, and similar attributes.
- Use consts instead of functions, for example, "const toggle = () =>". Also, define a type if possible.

7.vue-js-conventions

js 复制代码

---
description: Specific conventions for Vue.js components. Follow Vue.js docs where appropriate.
globs: src/components/**/*.vue
---
- Follow Vue.js documentation for best practices.
- Organize component options in a consistent order (e.g., data, computed, methods, watch, lifecycle hooks).
- Use `v-bind` and `v-on` directives for data binding and event handling.
- Prefer using single file components (.vue files).

vueuse-library-rule

js 复制代码

---
description: Encourages leveraging VueUse functions throughout the project to enhance reactivity and performance.
globs: src/**/*.*
---
- Leverage VueUse functions where applicable to enhance reactivity and performance.

vue-js-component-rule

js 复制代码

---
description: Defines the style and structure for Vue.js components, including naming conventions, composition API usage, and UI library preferences.
globs: src/components/**/*.vue
---
- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for functions.
- Always use the Vue Composition API script setup style.
- Use DaisyUI, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.