project/nuxt3/pages/signIn.vue

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

<template>
    <section class="d-flex justify-content-center align-items-center flex-column">
        <form @submit.prevent="submitForm()" class="d-flex flex-column gap-3">
            <h1>авторизация</h1>
            <input class="p-1" type="text" placeholder="Логин" v-model="login">
            <input class="p-1" type="password" placeholder="Пароль" v-model="password">
            <button type="submit" class="btn btn-primary">Авторизироватся</button>
        </form>
    </section>
</template>

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