vuejs-ai/criar-composable-adaptável

O que criar-composable-adaptável faz?

Crie um composable Vue de nível de biblioteca que aceita entradas talvez-reativas (MaybeRef / MaybeRefOrGetter) para que os chamadores possam passar um valor simples, ref ou getter. Normalize as entradas com toValue()/toRef() dentro de efeitos reativos (watch/watchEffect) para manter o comportamento previsível e reativo. Use esta habilidade quando o usuário solicitar a criação de composables adaptáveis ou reutilizáveis.

Como usar

1. Solicite a criação de um composable – Por exemplo, "crie um composable useMousePosition que reage a movimentos do mouse".
2. O skill analisará a solicitação e gerará um composable que aceita entradas talvez-reativas.
3. O composable gerado incluirá:
   • Definição de tipos para MaybeRef / MaybeRefOrGetter
   • Uso de toValue() e toRef() para normalizar entradas
   • Efeitos reativos (watch / watchEffect) seguros
   • Documentação inline e exemplos de uso

Exemplo de saída

import { ref, toValue, toRef, watchEffect, type MaybeRefOrGetter } from 'vue'

// Exemplo de composable que aceita posição inicial como MaybeRefOrGetter
// e rastreia movimentos do mouse relativos a essa posição
export function useMouse(
  initial: MaybeRefOrGetter<{ x: number; y: number }> = { x: 0, y: 0 }
) {
  const x = ref(toValue(initial).x)
  const y = ref(toValue(initial).y)

  watchEffect(() => {
    const pos = toValue(initial)
    // Atualiza posição inicial se mudar (por exemplo, se for uma ref)
    x.value = pos.x
    y.value = pos.y
  })

  function onMouseMove(event: MouseEvent) {
    x.value = event.clientX - toValue(initial).x
    y.value = event.clientY - toValue(initial).y
  }

  // ... lógica de ciclo de vida

  return { x, y }
}

Boas práticas

• Sempre use toValue() dentro de watchEffect ou watch para obter o valor atual.
• Se o valor normalizado precisar ser reativo, use toRef() para criar uma ref sincronizada.
• Documente se o parâmetro espera MaybeRef ou MaybeRefOrGetter para clareza do usuário.
• Trate valores padrão com cuidado (use toValue(default) se o default for dinâmico).

Compatibilidade

• Vue 3.3+ (introdução de toValue)
• Funciona em qualquer plataforma com suporte a Vue 3, incluindo Cursor, Claude Code, Codex, etc.

Referências

• Documentação Vue: Reatividade
• VueUse: Estratégias para composables