Nuxt 3: looking for suggestions for creating forms with validations for an ERP app

Question

TL;DR:

Apart from PrimeVue, FormKit, NuxtUI and Yup/Zustand, what would you recommend for developing a heavily form-focused Nuxt 3 app?

Long story not short:

I'm working in a company that's currently developing an ERP app with Nuxt 3.

We're using PrimeVue for UI elements and FormKit for form creation and validation, and also a couple of wrapper libraries (@sfxcode/formkit-primevue and @sfxcode/nuxt-primevue).

So far, we've managed to create a reusable component that receives data like this:

return {
    title: 'Detalles',
    enableEdition: true,
    variablesRows: [
      {
        columns: 4,
        variables: [
          {
            type: 'text',
            validation: [['required'], ['length', 1, 200]],
            title: 'Name',
            name: 'name',
            value: contact.name ?? '',
            valueSize: 'small'
          },
          {
            type: 'email',
            validation: [['email']],
            title: 'Email',
            name: 'email',
            value: contact.email ?? '',
            valueSize: 'small'
          },
          {
            title: 'Phone',
            name: 'phone',
            value: contact.phone ?? '',
            validation: [
              [
                'matches',
                /^\s*(?:\+?(\d{1,3}))?([-. (]*(\d{3})[-. )]*)?((\d{3})[-. ]*(\d{2,4})(?:[-.x ]*(\d+))?)\s*$/
              ]
            ],
            type: 'phone',
            placeholder: 'Teléfono principal',
            valueSize: 'small'
          },
        ]
      }
    ]
  }
}

and creates the form with the desired layout (columns number is variable). The variabe "type" is used to generate the schema with the desired PrimeVue component (InputText, InputNumber, Dropdown...) and other properties to FormKit.

Then this is how the form is rendered:

<FormKit
  ref="form"
  #default="{ state: { valid } }"
  v-model="result"
  type="form"
  :actions="false"
  :incomplete-message="false"
  @submit="submitForm"
  :config="{ validationVisibility: 'submit' }"
>
  <!-- eslint-enable -->
  <div class="flex flex-col size-full gap-7">
    <div
      v-for="variableRow in props.variablesRows"
      :key="variableRow.columns"
      class="w-full flex flex-col gap-7"
    >
      <div
        class="w-full grid gap-7"
        :class="[getGridClass(variableRow.columns)]"
      >
        <div
          class="w-full flex flex-col gap-1 text-xs font-medium items-start h-full"
        >
          <div
            :class="editMode ? 'text-secondary-800' : 'text-secondary-500'"
          >
            {{ title }}
            <span
              v-if="editMode && checkIfRequired(schema)"
              class="text-secondary-500"
              >(Obligatorio)</span
            >
          </div>
          <FormKitSchema :schema="schema as any" />
        </div>
      </div>
    </div>
  </div>
</FormKit>

Now, things are getting complicated lately, trying to fit the Figma design into PrimeVue+FormKit. Examples:

• Having the submit button outside the <FormKit> component (on the top-right corner of the page, instead of below the form).
• Having UI elements change their content or visibility depending on another UI element content. For instance, selecting a certain option in a dropdown can change the options available in another dropdown.
• Changing labels to show "(Required)" on some fields.

Currently, we're stuck on the second point (changing UI elements visibility and/or content depending on another UI element's value). And the other points and some other I didn't type, we've been able to manage to reflect the Figma file with some tweaking.

But we're getting to the point of considering if we're "tweaking too much", and if we should move to another library. Enter NuxtUI.

We're considering switching to NuxtUI because it wraps UI elements and form creation in the same package, and leaves validation to other libraries such as Yup or Zustand.

However, we have to consider the time to be spent on this migration, and we also need to know if it's actually a wise move.

So I'd like to ask here: apart from the mentioned libraries (PrimeVue, FormKit, NuxtUI, Yup/Zustand), what would you recommend for developing a heavily form-focused Nuxt 3 app?

We've tried PrimeVue+FormKit, and we were expecting being able to create a reusable component to generate all forms according to the design that we've been provided, but we're suffering a bit from limitations we're encountering as the app design gets more sophisticated.