86 lines
1.9 KiB
Text
86 lines
1.9 KiB
Text
---
|
|
type: rule
|
|
name: estrutura-vue
|
|
description: Padrões obrigatórios de estrutura para componentes Vue 3 (defineComponent, setup, CSS, dispatch)
|
|
scope: local
|
|
trigger: file_match
|
|
globs:
|
|
- "**/*.vue"
|
|
updatedAt: "2026-06-01"
|
|
---
|
|
|
|
# Regra: Estrutura de Componentes Vue
|
|
|
|
## 1. `defineComponent` obrigatório
|
|
|
|
Todo componente Vue deve usar `defineComponent`:
|
|
|
|
```vue
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
|
|
export default defineComponent({
|
|
name: 'MeuComponente',
|
|
setup() {
|
|
// lógica aqui
|
|
}
|
|
})
|
|
</script>
|
|
```
|
|
|
|
## 2. `setup()` não pode ser externo
|
|
|
|
O `setup()` deve estar sempre dentro do `.vue`. Nunca delegar para arquivo externo.
|
|
|
|
```ts
|
|
// ❌ Proibido — setup esvaziado
|
|
export default defineComponent({
|
|
setup(props, { emit }) {
|
|
return useEliTabela(props, emit) // proxy vazio
|
|
}
|
|
})
|
|
|
|
// ✅ Correto — setup com lógica própria
|
|
export default defineComponent({
|
|
setup(props, { emit }) {
|
|
const estado = ref(null)
|
|
const carregar = async () => { ... }
|
|
return { estado, carregar }
|
|
}
|
|
})
|
|
```
|
|
|
|
> Composables `use*.ts` podem encapsular lógica reutilizável pontual, mas nunca substituir o `setup()`. Se ultrapassar 250 linhas → extrair subcomponentes, CSS ou Dispatch Table.
|
|
|
|
## 3. CSS co-localizado
|
|
|
|
Separação de estilos em arquivo externo quando o CSS contribui para o total de linhas:
|
|
|
|
```
|
|
MeuComponente.vue
|
|
MeuComponente.css
|
|
```
|
|
|
|
Importar via `import './MeuComponente.css'` ou `<style src="./MeuComponente.css" />`.
|
|
|
|
## 4. Dispatch Table
|
|
|
|
Uso de mapa de funções para eliminar `if/else` ou `switch` longos:
|
|
|
|
```ts
|
|
// handlers.ts
|
|
export const acaoHandlers: Record<string, () => void> = {
|
|
salvar: () => { ... },
|
|
cancelar: () => { ... },
|
|
excluir: () => { ... },
|
|
}
|
|
```
|
|
|
|
## Impacto
|
|
|
|
Sem estes padrões, componentes perdem inferência de tipos, lógica fica inauditável em composables externos, e CSS cresce inline sem controle.
|
|
|
|
## Referências
|
|
|
|
- Rule: `global/rules/limite-linhas`
|
|
- Rule: `global/rules/typescript-sem-any`
|