Set form fields and buttons as components

resources/js/components/FormButtons.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="field is-grouped">
+        <div class="control">
+            <v-button :isLoading="isBusy" >{{ caption }}</v-button>
+        </div>
+        <div class="control" v-if="showCancelButton">
+            <router-link :to="{ name: cancelLandingView }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'FormButtons',
+        
+        data() {
+            return {
+
+            }
+        },
+
+        props: {
+            showCancelButton: {
+                type: Boolean,
+                default: false
+            },
+
+            isBusy: {
+                type: Boolean,
+                default: false
+            },
+
+            caption: {
+                type: String,
+                default: 'Submit'
+            },
+
+            cancelLandingView: {
+                type: String,
+                default: ''
+            },
+        }
+    }
+</script>

resources/js/components/FormField.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="field">
+        <label class="label" v-html="label"></label>
+        <div class="control">
+            <input :id="fieldName" :type="inputType" class="input" v-model="form[fieldName]" :placeholder="placeholder" v-bind="$attrs" />
+        </div>
+        <field-error :form="form" :field="fieldName" />
+    </div> 
+</template>
+
+<script>
+    export default {
+        name: 'FormField',
+        inheritAttrs: false,
+        
+        data() {
+            return {
+
+            }
+        },
+
+        props: {
+            label: {
+                type: String,
+                default: ''
+            },
+
+            fieldName: {
+                type: String,
+                default: '',
+                required: true
+            },
+
+            inputType: {
+                type: String,
+                default: 'text'
+            },
+
+            form: {
+                type: Object,
+                required: true
+            },
+
+            placeholder: {
+                type: String,
+                default: ''
+            },
+        }
+    }
+</script>

resources/js/components/index.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import Button from './Button'
 import FieldError from './FieldError'
 import FormWrapper from './FormWrapper'
+import FormField from './FormField'
+import FormButtons from './FormButtons'
 import VueFooter from './Footer'
 
 // Components that are registered globaly.
@@ -9,6 +11,8 @@ import VueFooter from './Footer'
 	Button,
     FieldError,
     FormWrapper,
+    FormField,
+    FormButtons,
     VueFooter,
 ].forEach(Component => {
 	Vue.component(Component.name, Component)