Nuxt•2mo ago

How to animate form error message with nuxt ui

How to animate form error message with nuxt ui.

3 Replies

Hi @Anto'. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To animate form error messages with Nuxt UI, you can leverage Vue's built-in <transition> component around the error display area in your form. While Nuxt UI's <UFormField> automatically displays error messages when used inside a <UForm>, you can wrap the error slot or the error prop output in a <transition> to animate its appearance and disappearance. Here's how you can do it:

<template>
  <UForm :validate="validate" :state="state" @submit="onSubmit">
    <UFormField label="Email" name="email">
      <UInput v-model="state.email" />
      <template #error="{ error }">
        <transition name="fade">
          <div v-if="error">{{ error }}</div>
        </transition>
      </template>
    </UFormField>
    <UButton type="submit">Submit</UButton>
  </UForm>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

<template>
  <UForm :validate="validate" :state="state" @submit="onSubmit">
    <UFormField label="Email" name="email">
      <UInput v-model="state.email" />
      <template #error="{ error }">
        <transition name="fade">
          <div v-if="error">{{ error }}</div>
        </transition>
      </template>
    </UFormField>
    <UButton type="submit">Submit</UButton>
  </UForm>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

- The <transition name="fade"> wraps the error message, and the CSS provides a simple fade effect. - The error message is provided by the error slot of <UFormField>, which is automatically set when a validation error occurs in a Nuxt UI form. This approach is fully compatible with Nuxt UI's form and field components, as error messages are displayed via the error prop or slot, and Vue transitions can be used to animate their appearance and disappearance. For more on error handling in Nuxt UI forms, see the FormField documentation and Form input events and error event handling. If you want to customize the animation, you can adjust the CSS in the <style> block. Note: The knowledge sources do not mention built-in animation for error messages in Nuxt UI, but using Vue's <transition> as shown above is the recommended and standard approach. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@141085430098427904> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Anto'OP•2mo ago

I don't want to make this for every field on my form. Is it possible to add by default ?

Gaming

Programming

How to animate form error message with nuxt ui

Did you find this page helpful?