Added animate.css & changed sass libraries import

package.json

@@ -10,18 +10,18 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
+        "animate.css": "^4.1.0",
         "axios": "^0.19",
         "browser-sync": "^2.26.7",
         "browser-sync-webpack-plugin": "^2.0.1",
         "cross-env": "^7.0",
         "laravel-mix": "^5.0.1",
         "lodash": "^4.17.13",
-        "resolve-url-loader": "^3.1.0",
-        "sass": "^1.15.2",
+        "resolve-url-loader": "^2.3.1",
+        "sass": "^1.20.1",
         "sass-loader": "^8.0.0",
-        "vue-template-compiler": "^2.6.11"
-    },
-    "dependencies": {
-        "uikit": "^3.4.0"
+        "uikit": "^3.4.4",
+        "vue": "^2.5.17",
+        "vue-template-compiler": "^2.6.10"
     }
 }

resources/js/app.js

@@ -1,8 +1,26 @@
-require('./bootstrap');
+import axios from "axios";
+
+axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+export { axios };
 
 import UIkit from "uikit";
 import Icons from "uikit/dist/js/uikit-icons";
 
-window.UIkit = UIkit;
-
 UIkit.use(Icons);
+
+import Vue from "vue";
+
+import StreamEventComponent from "./components/auth/StreamEventComponent";
+import DiscordWebhookMessageComponent from "./components/auth/hookActions/DiscordWebhookMessageComponent";
+
+Vue.component("stream-event", StreamEventComponent);
+Vue.component("discord-webhook-message", DiscordWebhookMessageComponent);
+
+document.addEventListener("DOMContentLoaded", () => {
+
+    const app = new Vue({
+        el: "#content"
+    });
+
+});

resources/sass/_animate-css.scss

@@ -0,0 +1 @@
+@use "~animate.css/animate";

resources/sass/_uikit.scss

@@ -0,0 +1,15 @@
+// 1. Your custom variables and variable overwrites.
+// $global-link-color: #DA7D02;
+
+// 2. Import default variables and available mixins.
+@import "~uikit/src/scss/variables-theme";
+@import "~uikit/src/scss/mixins-theme";
+
+// 3. Your custom mixin overwrites.
+// @mixin hook-card() { color: #000; }
+
+// 4. Import UIkit.
+@import "~uikit/src/scss/uikit-theme";
+
+// uikit overrides, mainly fixes of colors due to dark theme
+@import "uikitOverrides";

resources/sass/app.scss

@@ -1,18 +1,7 @@
-// 1. Your custom variables and variable overwrites.
-// $global-link-color: #DA7D02;
+@import "./uikit";
 
-// 2. Import default variables and available mixins.
-@import "~uikit/src/scss/variables-theme.scss";
-@import "~uikit/src/scss/mixins-theme.scss";
-
-// 3. Your custom mixin overwrites.
-// @mixin hook-card() { color: #000; }
-
-// 4. Import UIkit.
-@import "~uikit/src/scss/uikit-theme.scss";
-
-// uikit overrides, mainly fixes of colors due to dark theme
-@import "uikitOverrides";
+// TODO import only the used animations
+@import "./animate-css";
 
 @import "./components/toggle";
 
@@ -25,3 +14,7 @@ $footer-height: 80px;
 footer {
     line-height: $footer-height;
 }
+
+.flex-grow {
+    flex-grow: 1;
+}