New vuejs Button component

resources/js/app.js

@@ -15,6 +15,7 @@ import Edit             from './views/Edit'
 import PasswordRequest  from './views/auth/password/Request'
 import PasswordReset    from './views/auth/password/Reset'
 import NotFound         from './views/Error'
+import Button           from './components/Button'
 
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -24,6 +25,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 library.add(faPlus, faQrcode, faImage, faTrash, faEdit, faCheck, faLock, faLockOpen, faSearch);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
+Vue.component('VButton', Button)
 
 // const lang = document.documentElement.lang.substr(0, 2);
 const lang = 'en';

resources/js/components/Button.vue

@@ -0,0 +1,41 @@
+<template>
+    <button 
+        :type="nativeType" 
+        :class="{
+            [`${color}`]: true,
+            'is-large': isLarge,
+            'is-focused': isFocused,
+          }" 
+        class="button">
+        <slot />
+    </button>
+</template>
+
+<script>
+    export default {
+        name: 'VButton',
+
+        props: {
+            color: {
+                type: String,
+                default: 'is-link'
+            },
+
+            nativeType: {
+                type: String,
+                default: 'submit'
+            },
+
+            isFocused: {
+                type: Boolean,
+                default: false
+            },
+
+            isLarge: {
+                type: Boolean,
+                default: false
+            }
+        }
+    }
+
+</script>