mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-02 11:40:00 +00:00
70 lines
2.3 KiB
Plaintext
70 lines
2.3 KiB
Plaintext
// Vue 3 Composition API .cursorrules
|
|
|
|
// 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:
|
|
|
|
const { nodes, showTotal = true } = defineProps<{
|
|
nodes: ApiNodeCost[]
|
|
showTotal?: boolean
|
|
}>()
|
|
|
|
",
|
|
"Organize vue component in <template> <script> <style> order",
|
|
]
|
|
|
|
// Folder structure
|
|
const folderStructure = `
|
|
src/
|
|
components/
|
|
constants/
|
|
composables/
|
|
views/
|
|
stores/
|
|
services/
|
|
App.vue
|
|
main.ts
|
|
`;
|
|
|
|
// Tailwind CSS best practices
|
|
const tailwindCssBestPractices = [
|
|
"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"
|
|
]
|
|
|
|
// Additional instructions
|
|
const additionalInstructions = `
|
|
1. Leverage VueUse functions for performance-enhancing styles
|
|
2. Use lodash for utility functions
|
|
3. Use TypeScript for type safety
|
|
4. Implement proper props and emits definitions
|
|
5. Utilize Vue 3's Teleport component when needed
|
|
6. Use Suspense for async components
|
|
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.
|
|
11. Never use deprecated PrimeVue components listed above
|
|
`;
|