Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 31 additions & 39 deletions .cursorrules
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@
// Vue 3 Composition API .cursorrules
# Vue 3 Composition API Project Rules

// Vue 3 Composition API best practices
const vue3CompositionApiBestPractices = [
"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",
"Use vue 3.5 style of default prop declaration. Example:
## Vue 3 Composition API Best Practices
- 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
- Use vue 3.5 style of default prop declaration. Example:

```typescript
const { nodes, showTotal = true } = defineProps<{
nodes: ApiNodeCost[]
showTotal?: boolean
}>()
```

",
"Organize vue component in <template> <script> <style> order",
]
- Organize vue component in <template> <script> <style> order

// Folder structure
const folderStructure = `
## Project Structure
```
src/
components/
constants/
Expand All @@ -30,30 +29,25 @@ src/
services/
App.vue
main.ts
`;
```

// Tailwind CSS best practices
const tailwindCssBestPractices = [
"Use Tailwind CSS for styling",
"Implement responsive design with Tailwind CSS",
]
## Styling Guidelines
- Use Tailwind CSS for styling
- Implement responsive design with Tailwind CSS

// PrimeVue deprecated components - DO NOT USE
const deprecatedPrimeVueComponents = [
"DO NOT use deprecated PrimeVue components. Use these replacements instead:",
"Dropdown → Use Select (import from 'primevue/select')",
"OverlayPanel → Use Popover (import from 'primevue/popover')",
"Calendar → Use DatePicker (import from 'primevue/datepicker')",
"InputSwitch → Use ToggleSwitch (import from 'primevue/toggleswitch')",
"Sidebar → Use Drawer (import from 'primevue/drawer')",
"Chips → Use AutoComplete with multiple enabled and typeahead disabled",
"TabMenu → Use Tabs without panels",
"Steps → Use Stepper without panels",
"InlineMessage → Use Message component"
]
## PrimeVue Component Guidelines
DO NOT use deprecated PrimeVue components. Use these replacements instead:
- Dropdown → Use Select (import from 'primevue/select')
- OverlayPanel → Use Popover (import from 'primevue/popover')
- Calendar → Use DatePicker (import from 'primevue/datepicker')
- InputSwitch → Use ToggleSwitch (import from 'primevue/toggleswitch')
- Sidebar → Use Drawer (import from 'primevue/drawer')
- Chips → Use AutoComplete with multiple enabled and typeahead disabled
- TabMenu → Use Tabs without panels
- Steps → Use Stepper without panels
- InlineMessage → Use Message component

// Additional instructions
const additionalInstructions = `
## Development Guidelines
1. Leverage VueUse functions for performance-enhancing styles
2. Use lodash for utility functions
3. Use TypeScript for type safety
Expand All @@ -63,7 +57,5 @@ const additionalInstructions = `
7. Implement proper error handling
8. Follow Vue 3 style guide and naming conventions
9. Use Vite for fast development and building
10. Use vue-i18n in composition API for any string literals. Place new translation
entries in src/locales/en/main.json.
10. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
11. Never use deprecated PrimeVue components listed above
`;