vue3
Definitive guidelines for building maintainable, performant, and type-safe Vue 3 applications using modern best practices, Composition API, and TypeScript.
स्किल
# Vue 3 Best Practices
This guide outlines the essential rules for developing high-quality Vue 3 applications. Adhere to these standards to ensure consistency, readability, and long-term maintainability across our codebase.
## 1. Foundational Setup: Linting & Formatting
**Always use ESLint and Prettier.** This combination enforces consistent code style and catches common errors automatically, streamlining development and code reviews. Integrate them into your IDE for real-time feedback and format-on-save.
## 2. Code Organization & Naming
### 2.1. Single-File Components (SFCs)
Each component **must** reside in its own `.vue` file.
❌ BAD
```js
// app.component('TodoList', { /* ... */ })
// app.component('TodoItem', { /* ... */ })
```
✅ GOOD
```
components/
├── TodoList.vue
└── TodoItem.vue
```
### 2.2. SFC Filename Casing
Use **PascalCase** for all SFC filenames. This aligns with component referencing in templates and JS(X) and improves editor autocompletion.
❌ BAD
```
components/
├── my-component.vue
└── myComponent.vue
```
इसे कैसे लगाएं
1. Open the tool and start a new conversation, project or template. 2. Paste the text below wherever the tool keeps standing instructions — usually called system prompt, instructions, or persona. 3. Save it so it applies to every run rather than a single message.