vue-componentes/.agent/rules/estrutura-vue.global.md

type	name	description	scope	trigger	globs	updatedAt
rule	estrutura-vue	Padrões obrigatórios de estrutura para componentes Vue 3 (defineComponent, setup, CSS, dispatch)	global	file_match	**/*.vue	2026-06-01

Regra: Estrutura de Componentes Vue

1. defineComponent obrigatório

Todo componente Vue deve usar defineComponent:

<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.

// ❌ 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:

// 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: .agent/rules/limite-linhas.global.md
• Rule: .agent/rules/typescript-sem-any.global.md