paulnicoue/components/ContactForm.vue

<template>

    <VeeForm class="contact-form" @submit="sendEmail" :validation-schema="contactFormSchema">
        <div class="contact-form__name">
            <label for="name">Nom</label>
            <VeeField id="name" name="name" />
            <Transition name="fade-in-expand-height">
                <VeeError name="name" as="p" />
            </Transition>
        </div>
        <div class="contact-form__email">
            <label for="email">Adresse e-mail</label>
            <VeeField id="email" name="email" />
            <Transition name="fade-in-expand-height">
                <VeeError name="email" as="p" />
            </Transition>
        </div>
        <div class="contact-form__subject">
            <label for="subject">Sujet</label>
            <VeeField id="subject" name="subject" />
            <Transition name="fade-in-expand-height">
                <VeeError name="subject" as="p" />
            </Transition>
        </div>
        <div class="contact-form__message">
            <label for="message">Message</label>
            <VeeField id="message" name="message" as="textarea" />
            <Transition name="fade-in-expand-height">
                <VeeError name="message" as="p" />
            </Transition>
        </div>
        <VeeField name="honeypot" type="hidden" />
        <ContactFormValidation class="contact-form__validation" ref="contactFormValidation" @send-email="sendEmail" />
    </VeeForm>

</template>

<script setup>

    // --------------------------------------------------
    // DATA
    // --------------------------------------------------

    // Yup schema builder

    const yupObject = useNuxtApp().$yupObject;
    const yupString = useNuxtApp().$yupString;

    const contactFormSchema = yupObject({
        name: yupString()
            .min(2, 'Votre nom doit comprendre au moins ${min} caractères.')
            .required('Veuillez saisir votre nom.'),
        email: yupString()
            .email('Veuillez saisir une adresse e-mail valide.')
            .required('Veuillez saisir votre adresse e-mail.'),
        subject: yupString()
            .min(2, 'Le sujet de votre message doit comprendre au moins ${min} caractères.')
            .required('Veuillez saisir le sujet de votre message.'),
        message: yupString()
            .min(10, 'Votre message doit comprendre au moins ${min} caractères.')
            .required('Veuillez saisir votre message.'),
        honeypot: yupString()
            .max(0)
    });

    // Form validation component

    const contactFormValidation = ref();

    // --------------------------------------------------
    // LOGIC
    // --------------------------------------------------

    const sendEmail = async (values) => {
        contactFormValidation.value.isLoading = true;
        try {
            await $fetch('/api/contact', {
                method: 'post',
                body: {
                    name: values.name,
                    email: values.email,
                    subject: values.subject,
                    message: values.message
                }
            });
            contactFormValidation.value.isSuccessful = true;
        } catch {
            contactFormValidation.value.isSuccessful = false;
        } finally {
            contactFormValidation.value.loader.addEventListener('animationiteration', function hideLoader(event) {
                event.currentTarget.removeEventListener('animationiteration', hideLoader);
                contactFormValidation.value.isLoading = false;
                contactFormValidation.value.isValidated = true;
            });
        }
    }

</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // STYLE
    // --------------------------------------------------

    .contact-form {
        display: grid;
        grid:
            'name name' auto
            'email email' auto
            'subject subject' auto
            'message message' auto
            'validation validation' auto
            / 1fr 1fr;
        place-content: start;
        place-items: start;
        gap: 1.5rem;

        &__name {
            grid-area: name;
        }

        &__email {
            grid-area: email;
        }

        &__subject {
            grid-area: subject;
        }

        &__message {
            grid-area: message;
        }

        &__name,
        &__email,
        &__subject,
        &__message {
            width: 100%;
        }            

        &__validation {
            grid-area: validation;
        }
        
        @media screen and (min-width: $tablet-media-query) {
            grid:
                'name name .' auto
                'email email .' auto
                'subject subject subject' auto
                'message message message' auto
                'validation validation validation' auto
                / 1fr 1fr 1fr;
        }
    }

    // Transition components

    .fade-in-expand-height {

        &-enter-from,
        &-leave-to {
            opacity: 0;
            max-height: 0;
        }

        &-enter-active,
        &-leave-active {
            transition:
                opacity 600ms ease-in-out,
                max-height 600ms ease-in-out;
        }

        &-enter-to,
        &-leave-from {
            max-height: calc(3 * var(--caption-font-height));
        }
    }

</style>