vue3

La skill Copiar

# 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
```

Cómo instalarla Copiar

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.

¿Te funcionó?

De dónde viene