cursor vue3 rules

  1. 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
  1. 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
  1. 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
  1. 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
  1. 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).
  1. 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.
  1. 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.
相关推荐
中微子10 分钟前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z19 分钟前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录27 分钟前
虚拟DOM
前端·vue.js·dom
爱学习的茄子27 分钟前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神28 分钟前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
摆烂为不摆烂32 分钟前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神32 分钟前
cocos游戏开发中,如何制作一个空气墙
前端·javascript
爱编程的喵32 分钟前
深入理解JavaScript事件循环机制:从同步到异步的完整解析
前端·javascript
202633 分钟前
11. vite打包优化
前端·javascript·vite
拾光拾趣录38 分钟前
组件封装的⼀些基本准则
前端·前端工程化