Display error / success messages at the bottom of the form

Learn how to create a custom view for the form.

First, we have to create a new component called Vueform_reversed.vue which will be our template replacement for <Vueform> component.

Then, we have to copy the <template> part of the original <Vueform> component from: https://github.com/vueform/vueform/blob/main/themes/blank/templates/Vueform.vue

vue

<!-- Vueform_reversed.vue -->

<template>
  <form :class="classes.form" @submit.prevent="submit">
    <slot name="empty" :classes="classes">
      <component is="FormLanguages" v-if="showLanguages"/>
      <component is="FormTabs" v-if="showTabs"/>
      <component is="FormSteps" v-if="showSteps"/>
      <FormElements><slot/></FormElements>
      <component is="FormMessages" v-if="showMessages"/>
      <component is="FormErrors" v-if="showErrors"/>
      <component is="FormStepsControls" v-if="showStepsControls"/>
    </slot>
  </form>
</template>

<script>
export default {
  data: () => ({
    merge: true,
    defaultClasses: {}
  })
}
</script>

Next, we have to register the Vueform_reversed.vue component as an alternative view for Vueform and create a preset that uses that view for Vueform component and adds margin top to the error / message containers:

// vueform.config.js

import { defineConfig } from '@vueform/vueform'

import Vueform_reversed from './Vueform_reversed.vue'

export default defineConfig({
  templates: {
    Vueform_reversed,
  },
  presets: {
    reversed: {
      views: {
        Vueform: 'reversed',
      },
      addClasses: {
        FormErrors: {
          container: 'mt-4'
        },
        FormMessages: {
          container: 'mt-4'
        },
      }
    }
  }
})

Once ready, we can use the reversed preset, that will use our custom template with class extensions:

vue

<Vueform :presets="['reversed']" />

Display error / success messages at the bottom of the form ​

Display error / success messages at the bottom of the form