Submit Button
Customizable submit button component for Nuxt Auto Form.
By default, Nuxt Auto Form provides a submit button at the bottom of the form.
When form is not valid, the aria-disabled property is set to true on the button.
Customization
Most use cases only require changing the submit button style or text.
You can do that by modifying the submit property in any config:
app.config.ts
export default defineAppConfig({
autoForm: {
submit: {
props: { label: 'Send the form!', class: 'w-full flex justify-center' },
},
},
})
Custom component
If it is not sufficient, and you want to create completely custom component for submit button you can do that as well.
If you use string to define the component it must be globally registered to work.
To do this, name your component with the
.global.vue suffix, or place it in components/global/ directory.To learn more about importing and registering components, visit the components sections of config docs.
app.config.ts
export default defineAppConfig({
autoForm: {
submit: {
component: 'MyButton',
},
},
})
Your custom component will receive the following props:
disabled
boolean
Boolean property that indicates whether at least one field is invalid.
Disabling
If you want to remove the submit button completely, you can set the submit property to false in your config:
app.config.ts
export default defineAppConfig({
autoForm: {
submit: false
},
})
## Examples
::code-collapse
```vue [MyButton.global.vue]
<script setup lang="ts">
defineProps<{
disabled?: boolean
}>()
</script>
<template>
<UButton
type="submit"
color="neutral"
:class="disabled ? 'bg-red-500' : ''"
class="w-full flex justify-center cursor-pointer"
label="My custom send button"
/>
</template>
::