diff --git a/resources/js/app.js b/resources/js/app.js
index 026177f..3259426 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -4,7 +4,6 @@
  * building robust, powerful web applications using Vue and Laravel.
  */
 import axios from 'axios';
-import animate from 'animate.css';
 import Vue from 'vue';
 window.Vue = require('vue');
 window.Event = new Vue();
@@ -18,8 +17,8 @@ window.bulmaToast = require('bulma-toast');
  *
  * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
  */
-const files = require.context('./', true, /\.vue$/i)
-files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
+import './components';
+
 /**
  * Constants
  */
diff --git a/resources/js/components.js b/resources/js/components.js
new file mode 100644
index 0000000..e67790e
--- /dev/null
+++ b/resources/js/components.js
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+
+const requireComponent = require.context('./components', true, /\.vue$/);
+
+requireComponent.keys().forEach(fileName => {
+    // Get the component config
+    const componentConfig = requireComponent(fileName);
+    // Get the PascalCase name of the component
+    const componentName = fileName
+        .replace(/^\.\/(.*)\.\w+$/, '$1')    // Remove "./" from the beginning and the file extension from the end
+        .replace(/\//g, '-')                 // Replace directories with hyphens
+        .replace(/([a-z])([A-Z])/g, '$1-$2') // Insert hyphen between camelCase words
+        .toLowerCase()                       // Convert to lowercase
+    // Globally register the component
+    Vue.component(
+        componentName,
+        // Look for the component options on `.default`, which will
+        // exist if the component was exported with `export default`,
+        // otherwise fall back to module's root.
+        componentConfig.default || componentConfig
+    );
+});