Nuxt•12mo ago

Nuxt UI loading-auto prop to show the loading icon automatically while the @click promise is pending

Hi taken from the (Nuxt UI docs)[https://ui3.nuxt.dev/components/button#loading] I should be able to add the prop loading-auto to the UButton to disable. I am using the button in a UForm and loading-auto is not working as expected because i guess the UButton is a type="submit" and not @click how can I achieve this?

Nuxt UI

Button Vue Component - Nuxt UI v3

A button element that can act as a link or trigger an action.

3 Replies

kapa.ai•12mo ago

Hi @keyboarddabbler. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I don't have enough specific information to fully answer your question about using the loading-auto prop with a UButton inside a UForm. The documentation you referenced is not included in the provided sources, and there's no mention of a loading-auto prop for the UButton component in the available information. However, I can provide some general information about loading states in Nuxt UI components based on the available sources: 1. The UButton component does support a loading prop to show a loading icon and disable the button. This is mentioned in the Button documentation:

<template>
  <UButton loading>Button</UButton>
</template>

<template>
  <UButton loading>Button</UButton>
</template>

2. For forms, you might be able to use the validate prop of the UForm component to handle the loading state. However, without more specific documentation about the UForm component, I can't provide a definitive solution. 3. If you need to manage the loading state manually, you could consider using a ref to control the loading state:

<script setup>
const isLoading = ref(false)

const handleSubmit = async () => {
  isLoading.value = true
  try {
    // Your form submission logic here
  } finally {
    isLoading.value = false
  }
}
</script>

<template>
  <UForm @submit="handleSubmit">
    <UButton :loading="isLoading" type="submit">Submit</UButton>
  </UForm>
</template>

<script setup>
const isLoading = ref(false)

const handleSubmit = async () => {
  isLoading.value = true
  try {
    // Your form submission logic here
  } finally {
    isLoading.value = false
  }
}
</script>

<template>
  <UForm @submit="handleSubmit">
    <UButton :loading="isLoading" type="submit">Submit</UButton>
  </UForm>
</template>

Unfortunately, the knowledge sources don't contain enough information about the specific loading-auto prop you mentioned or its behavior within a UForm. For the most accurate and up-to-date information, I recommend checking the latest Nuxt UI documentation or reaching out to the Nuxt UI community for support with this specific use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

keyboarddabblerOP•12mo ago

<UForm
                  ref="form"
                  :state="state"
                  :schema="schema"
                  class="w-full max-w-[960px] mx-auto"
                  @submit="onSubmit"
                >
                  <div class="grid grid-cols-1 gap-4">
                  
                    <UFormField
                      label="Filter Color"
                      name="filters"
                    >
                      <USelect
                        v-model="state.filters"
                        size="xl"
                        :items="filters"
                        class="w-full"
                      />
                    </UFormField>

                    <div class="flex gap-2 mt-8">
                      <UButton
                        v-if="!generatedImage"
                        loading-auto
                        type="submit"
                      >
                        Generate
                      </UButton>
                      <UButton
                        v-if="generatedImage"
                        @click="downloadImage"
                      >
                        Download
                      </UButton>
                      <UButton
                        variant="outline"
                        @click="() => {
                          form?.clear();
                          clearFormAndCanvas();
                        }"
                      >
                        Clear
                      </UButton>
                    </div>
                  </div>

                  <canvas
                    ref="canvas"
                    class="border mt-10 max-w-[960px] max-h-[540px] w-full h-auto"
                  />
                </UForm>

<UForm
                  ref="form"
                  :state="state"
                  :schema="schema"
                  class="w-full max-w-[960px] mx-auto"
                  @submit="onSubmit"
                >
                  <div class="grid grid-cols-1 gap-4">
                  
                    <UFormField
                      label="Filter Color"
                      name="filters"
                    >
                      <USelect
                        v-model="state.filters"
                        size="xl"
                        :items="filters"
                        class="w-full"
                      />
                    </UFormField>

                    <div class="flex gap-2 mt-8">
                      <UButton
                        v-if="!generatedImage"
                        loading-auto
                        type="submit"
                      >
                        Generate
                      </UButton>
                      <UButton
                        v-if="generatedImage"
                        @click="downloadImage"
                      >
                        Download
                      </UButton>
                      <UButton
                        variant="outline"
                        @click="() => {
                          form?.clear();
                          clearFormAndCanvas();
                        }"
                      >
                        Clear
                      </UButton>
                    </div>
                  </div>

                  <canvas
                    ref="canvas"
                    class="border mt-10 max-w-[960px] max-h-[540px] w-full h-auto"
                  />
                </UForm>

Gaming

Programming

Nuxt UI loading-auto prop to show the loading icon automatically while the @click promise is pending

Did you find this page helpful?