Precognition with Hybridly

api.php

<?php

use App\Http\Requests\MemberStoreRequest;
use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;

Route::middleware([HandlePrecognitiveRequests::class])->group(function () {
    Route::post('/api/member', function (MemberStoreRequest $request) {});
});

MemberStoreRequest.php

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class MemberStoreRequest extends FormRequest
{
    public function rules(): array
    {
        return [
            'last_name' => ['required'],
            'first_name' => ['required'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:members'],
        ];
    }

    public function authorize(): bool
    {
        return true;
    }
}

register.vue

<script lang="ts" setup>
import { usePrecognition } from '@/composables/usePrecognition'

const form = useForm({
  method: 'POST',
  url: route('register'),
  fields: {
    first_name: '',
    last_name: '',
    email: ''
  }
})

const { setData, setErrors, validate, errors } = usePrecognition('POST', '/api/register', form.fields)

const onChange = (field: string) => {
  setData(form.fields)
  validate(field)
}

const onSubmit = async () => {
  try {
    await form.submit()
    if (form.errors) {
      setErrors(form.errors)
    }
  } catch (error) {
    console.error(error)
  }
}

</script>
<template>
 <form
      id="register"
      @submit.prevent="onSubmit"
  >
    <div class="lg:col-span-12 col-span-24">
      <twice-ui-form-input
        v-model="form.fields.first_name"
        autofocus
        label="Vorname"
        placeholder="Gabriele"
        :error="errors?.first_name || ''"
            @change="onChange('first_name')"
        />
        </div>
        <div class="lg:col-span-12 col-span-24">
          <twice-ui-form-input
            v-model="form.fields.last_name"
            label="Nachname"
            placeholder="Musterfrau"
            :error="errors?.last_name || ''"
            @change="onChange('last_name')"
          />
        </div>
        <div class="col-span-24">
          <twice-ui-form-input
            v-model="form.fields.email"
            :error="errors?.email || ''"
            label="E-Mail-Adresse"
            placeholder="[email protected]"
            @change="onChange('email')"
          />
        </div>
    </form>
</template>

usePrecognition.ts

import { type Form, useForm } from 'laravel-precognition-vue'

interface Data extends Record<string, unknown> {
}

export const usePrecognition = (method: 'POST' | 'PATCH' | 'PUT', route: string, inputs: Data) => {
  const precognition = ref<Form | null>(null)

  precognition.value = useForm(method, route, inputs)
  const errors = computed(() => precognition.value.errors)

  return {
    precognition,
    setData: precognition.value.setData,
    setErrors: precognition.value.setErrors,
    validate: precognition.value.validate,
    errors
  }
}