---
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.md`
- Rule: `global/rules/typescript-sem-any.md`