useNuxtFormValidator

Use your Precognition form with Nuxt UI Forms.

This composable provides a custom wrapper for the Precognition form, which allows using it with Nuxt UI Form. It returns a validator function which should be passed into validate option of the Nuxt form.

Here is an example:

MyComponent.vue

<script lang="ts" setup>
const payload: LoginForm = {
  email: '',
  password: '',
  remember_me: false,
}

const form = usePrecognitionForm<LoginForm>(
    'post', 
    '/login', 
    payload
)

const validator = useNuxtFormValidator(form)
const state: LoginForm = form.fields

async function onSubmit(_: FormSubmitEvent<LoginForm>) {
  try {
    const response = await form.submit()
  }
  catch {
    console.error('Form submission error')
  }
}
</script>

<template>
  <UForm
    ref="nuxt-form"
    :validate="validator"
    :state="state"
    @submit="onSubmit"
  >
  <!-- other fields -->
  </UForm>
</template>

For more details, please check this page - Use with Nuxt UI.