Wrap forms in a vue component

resources/js/components/FormWrapper.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="columns is-centered">
+        <div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
+            <h1 class="title" v-html="title"></h1>
+            <slot />
+            <p v-if="showTag">
+                <span class="tag is-danger" v-if="fail" v-html="fail" />
+                <span class="tag is-success" v-if="success" v-html="success" />
+            </p>
+        </div>
+    </div>    
+</template>
+
+<script>
+    export default {
+        name: 'FormWrapper',
+        
+        data() {
+            return {
+
+            }
+        },
+
+        computed: {
+            showTag: function() {
+                return (this.fail || this.success) ? true : false
+            }
+        },
+
+        props: {
+            title: {
+                type: String,
+                default: ''
+            },
+
+            fail: {
+                type: String,
+                default: ''
+            },
+
+            success: {
+                type: String,
+                default: ''
+            },
+        }
+    }
+</script>

resources/js/components/index.js

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import Button from './Button'
 import FieldError from './FieldError'
+import FormWrapper from './FormWrapper'
 
 // Components that are registered globaly.
 [
 	Button,
     FieldError,
+    FormWrapper,
 ].forEach(Component => {
 	Vue.component(Component.name, Component)
 })