📊 Capítulo 10: Vee-Validate & Zod

Especialização em Frontend com Vue.js

🗺️ O Pipeline de Validação de Formulários com Zod no Vue 3

flowchart TD
    SCHEMA["Zod Schema: z.object({ email: z.string().email(), senha: z.string().min(8) })"]
    --> USE_FORM["const { defineField, errors, handleSubmit } = useForm({ validationSchema: toTypedSchema(schema) })"]
    USE_FORM --> FIELD["const [email, emailAttrs] = defineField('email')"]
    FIELD --> DOM["<input v-model='email' v-bind='emailAttrs' />"]
    DOM --> CHECK{"Digitação do Usuário"}
    CHECK --> |"Inválido"| ERR["<span class='erro'>{{ errors.email }}</span>"]
    CHECK --> |"Válido"| SUBMIT["handleSubmit((values) => api.login(values)) (Type-Safe DTO!)"]

    style SCHEMA fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style USE_FORM fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style FIELD fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style DOM fill:#fff9c4,stroke:#fbc02d,stroke-width:1.5px
    style ERR fill:#ffebee,stroke:#d32f2f,stroke-width:2px
    style SUBMIT fill:#e8f5e9,stroke:#4caf50,stroke-width:2px

🎯 Slide 1: Por Que Vee-Validate + Zod?

• Validações manuais em Vue geram dezenas de ref e de if/else poluindo o componente.

• Com Vee-Validate 4 + Zod: Um único schema declara as regras de negócio, as mensagens de erro em português e o tipo TypeScript final!

🎯 Slide 2: A Nova API defineField (Vee-Validate 4.1+)

const { defineField, errors, handleSubmit } = useForm({
  validationSchema: toTypedSchema(loginSchema),
});

const [email, emailProps] = defineField('email');
const [senha, senhaProps] = defineField('senha');

• Integração perfeita com v-model sem precisar envelopar os inputs com componentes pesados!

🎯 Slide 3: Submissão Blindada com handleSubmit

• Bloqueia automaticamente o evento de envio e foca no primeiro campo com erro se o formulário for inválido.