project/nuxt3/pages/signUp.vue

<script sepup>
    import { ref } from 'vue';
    const fullname = ref(''), login = ref(''), phone = ref(''), email = ref(''), password = ref('');
    let errorForm = ref('');
        if(!fullname.value && !login.value && !phone.value && !email.value && !password.value){
            const submitForm = async () => {
            try {
                    const {data} = await $fetch('/api/signUp', {
                        method: 'post',
                        body: {
                            fullname: fullname.value,
                            login: login.value,
                            phone: phone.value,
                            email: email.value,
                            password: password.value
                        }
                    })
            } catch (error) {
                    console.log('signUp', error);
            }
        }
    }else{
        errorForm.value = 'Заполните все поля'         
    }
</script>

<template>
    <section class="d-flex justify-content-center align-items-center flex-column">
        <h1>Регистрация</h1>
        <form @submit.prevent="submitForm()" class="d-flex flex-column gap-3">
            <p>{{ errorForm }}</p>
            <input type="text" placeholder="ФИО" v-model="fullname">
            <input type="text" placeholder="Логин" v-model="login">
            <input type="text" placeholder="Телифон" v-model="phone">
            <input type="email" placeholder="Почта" v-model="email">
            <input type="password" placeholder="Пароль" v-model="password">
            <button type="submit" class="btn btn-primary">Зарегистрироватся</button>
        </form>
    </section>
</template>

<style scoped>
    form{
        width: 450px;
    }
</style>