Replacing Component

• Replace Component

#Replace Component

You might want to replace any component provided by Laraform with a custom one. Eg. you want to create your custom solution for FormButton and use it instead of Laraform's built in version without changing anything else. Luckily, you do that pretty easily.

Creating Component

First, let's create a custom FormButton component at resources/js/components/FormButton.vue:

<script>
  import FormButton from '@laraform/laraform/src/themes/bs4/components/FormButton.vue'

  export default {
    mixins: [FormButton]
  }
</script>

As you can see we're extending the bs4 version of the button assuming we are using bs4 as theme. This way we already have a component which is completely identical to the one provided by Laraform's bs4 theme.

Overriding Component

Let's use this component to overwrite the default FormButton by setting it in resources/js/app.js or your main JS file:

import Vue from 'vue'
import Laraform from '@laraform/laraform/src'

import bs4 from '@laraform/laraform/src/themes/bs4'
import FormButton from './components/FormButton'

bs4.components.FormButton = FormButton

Laraform.theme('bs4', bs4)

Vue.use(Laraform)

const app = new Vue({
  el: '#app'
})

Confirm

To confirm we've successfully overwritten the component add an alert() to it when it is mounted:

<script>
  import FormButton from '@laraform/laraform/src/themes/bs4/components/FormButton.vue'

  export default {
    mixins: [FormButton],
    mounted() {
      alert('Custom button mounted')
    }
  }
</script>

Now if you use any button type within a form you should have an alert popped up when it is loaded displaying our message.

Adding Features

Now we're free to play around with our custom button.

As an example just copy the original <template> from @laraform/laraform/src/themes/bs4/components/FormButton.vue and add a loading class when the form is submitting:

<template>
  <button
    :class="[{loading: loading}, this.class]"
    :disabled="disabled"
    @click="handleClick"
  >{{ label }}</button>  
</template>

<script>
  import FormButton from '@laraform/laraform/src/themes/bs4/components/FormButton.vue'

  export default {
    mixins: [FormButton],
    computed: {
      loading() {
        return this.form$.submitting
      }
    }
  }
</script>

That's it, now when the form is submitting the button will receive a loading class that you use to style a loader.