mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
62 lines
2.0 KiB
Plaintext
62 lines
2.0 KiB
Plaintext
# Vue 3 Composition API Project Rules
|
|
|
|
## 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
|
|
|
|
## Project Structure
|
|
```
|
|
src/
|
|
components/
|
|
constants/
|
|
composables/
|
|
views/
|
|
stores/
|
|
services/
|
|
App.vue
|
|
main.ts
|
|
```
|
|
|
|
## Styling Guidelines
|
|
- Use Tailwind CSS for styling
|
|
- Implement responsive design with Tailwind CSS
|
|
|
|
## 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
|
|
|
|
## Development Guidelines
|
|
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
|