project/nuxt3/pages/create-order.vue

<script sepup>
    import { useCookie } from 'nuxt/app';
import { ref } from 'vue';
    const nameorder = ref(''), date = ref(''), pay = ref('');
    let errorForm = ref('');
    const online = useCookie('online');
    const user_id = online.id
    
    if(nameorder.value && date.value && pay.value){
        const submitForm = async (event) => {
           try {
                const data = await $fetch('/api/create-order', {
                    method: 'post',
                    body: {
                        user_id: user_id,
                        nameorder: nameorder.value,
                        date: date.value,
                        pay: pay.value,
                    }
                })

                return await navigateTo('/order')
           } catch (error) {
                console.log('signUp', error);
           }
        }
    }else{
        errorForm.value = 'Заполните все поля'         
    }
</script>

<template>
    <section class="d-flex flex-column">
        <h1>Index</h1>
        <form @submit.prifent="submitForm()" class="d-flex flex-column gap-3">
            <p>{{ errorForm }}</p>
            <input type="text" placeholder="Наименование курса" v-model="nameorder">
            <input type="date" placeholder="Дата начала" v-model="date">

            <section class="d-flex flex-column">
                <label>Способ оплаты</label>
                <output>
                    <select v-model="pay">Картой</select>
                    <select v-model="pay">По номеру телифона</select>
                </output>
            </section>
            <button type="submit" class="btn btn-primary">Создать заявку</button>
        </form>
    </section>
</template>

<style scoped>

</style>