Move components

resources/assets/js/components/global/Button.vue → resources/assets/js/components/Button.vue

@@ -5,7 +5,7 @@
     'btn-lg': large,
     'btn-loading': loading
   }">
-    <slot></slot>
+    <slot/>
   </button>
 </template>
 

resources/assets/js/components/global/Card.vue → resources/assets/js/components/Card.vue

@@ -5,7 +5,7 @@
     </div>
 
     <div class="card-body">
-      <slot></slot>
+      <slot/>
     </div>
   </div>
 </template>

resources/assets/js/components/global/Checkbox.vue → resources/assets/js/components/Checkbox.vue

@@ -9,7 +9,7 @@
       :id="id || name || 'checkbox'"
     >
     <label class="custom-control-label" :for="id || name || 'checkbox'">
-      <slot></slot>
+      <slot/>
     </label>
   </div>
 </template>

resources/assets/js/components/Loading.vue

@@ -4,7 +4,7 @@
     height: height,
     opacity: show ? 1 : 0,
     'background-color': canSuccess ? color : failedColor
-  }"></div>
+  }"/>
 </template>
 
 <script>

resources/assets/js/components/index.js

@@ -1,29 +1,17 @@
 import Vue from 'vue'
+import Card from './Card'
+import Button from './Button'
+import Checkbox from './Checkbox'
 import { HasError, AlertError, AlertSuccess } from 'vform'
 
-Vue.component(HasError.name, HasError)
-Vue.component(AlertError.name, AlertError)
-Vue.component(AlertSuccess.name, AlertSuccess)
-
-/**
- * @param {Object} requireContext
- */
-const registerComponents = requireContext => {
-  requireContext.keys().forEach(file => {
-    let component = requireContext(file)
-
-    if (component.default) {
-      component = component.default
-    }
-
-    if (component.name !== undefined) {
-      Vue.component(component.name, component)
-    }
-  })
-}
-
-// Load global components dynamically
-registerComponents(require.context('./global', false, /.*\.(js|vue)$/))
-
-// Load layout components dynamically
-registerComponents(require.context('./layouts', false, /.*\.(js|vue)$/))
+// Components that are registered globaly.
+[
+  Card,
+  Button,
+  Checkbox,
+  HasError,
+  AlertError,
+  AlertSuccess
+].forEach(Component => {
+  Vue.component(Component.name, Component)
+})

resources/assets/js/pages/auth/login.vue

@@ -58,9 +58,13 @@
 
 <script>
 import Form from 'vform'
+import LoginWithGithub from '~/components/LoginWithGithub'
 
 export default {
   middleware: 'guest',
+  components: {
+    LoginWithGithub
+  },
 
   metaInfo () {
     return { title: this.$t('login') }

resources/assets/js/pages/auth/register.vue

@@ -64,9 +64,13 @@
 
 <script>
 import Form from 'vform'
+import LoginWithGithub from '~/components/LoginWithGithub'
 
 export default {
   middleware: 'guest',
+  components: {
+    LoginWithGithub
+  },
 
   metaInfo () {
     return { title: this.$t('register') }