Migrate to VueJS 3

5 files changed, 13 insertions, 18 deletions

diff --git a/src/App.vue b/src/App.vue
index 664867f..43ba322 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -140,8 +140,8 @@
 </template>
 
 <script>
-const jsyaml = require("js-yaml");
-const merge = require("lodash.merge");
+import jsyaml from "js-yaml";
+import merge from "lodash.merge";
 
 import Navbar from "./components/Navbar.vue";
 import GetStarted from "./components/GetStarted.vue";
@@ -153,7 +153,7 @@ import SettingToggle from "./components/SettingToggle.vue";
 import DarkMode from "./components/DarkMode.vue";
 import DynamicTheme from "./components/DynamicTheme.vue";
 
-import defaultConfig from "./assets/defaults.yml";
+import defaultConfig from "./assets/defaults.yml?raw";
 
 export default {
   name: "App",
diff --git a/src/assets/app.scss b/src/assets/app.scss
index ae2cb6b..5102f93 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -2,7 +2,7 @@
 
 @import "./webfonts/webfonts.scss";
 
-@import "bulma";
+@import "../../node_modules/bulma/bulma";
 
 // Themes import
 @import "./themes/sui.scss";
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
index 165c992..53480e7 100644
--- a/src/components/SearchInput.vue
+++ b/src/components/SearchInput.vue
@@ -75,7 +75,7 @@ export default {
       this.$emit("input", value.toLowerCase());
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener("keydown", this._keyListener);
   },
 };
diff --git a/src/components/Service.vue b/src/components/Service.vue
index 25b86d5..ac378ec 100644
--- a/src/components/Service.vue
+++ b/src/components/Service.vue
@@ -1,8 +1,9 @@
 <template>
-  <component v-bind:is="component" :item="item" :proxy="proxy"></component>
+  <component :is="component" :item="item" :proxy="proxy"></component>
 </template>
 
 <script>
+import { defineAsyncComponent } from "vue";
 import Generic from "./services/Generic.vue";
 
 export default {
@@ -17,7 +18,7 @@ export default {
       if (type === "Generic") {
         return Generic;
       }
-      return () => import(`./services/${type}.vue`);
+      return defineAsyncComponent(() => import(`./services/${type}.vue`));
     },
   },
 };
diff --git a/src/main.js b/src/main.js
index e5995a4..164d290 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,19 +1,13 @@
-import Vue from "vue";
+import { createApp, h } from "vue";
 import App from "./App.vue";
-import "./registerServiceWorker";
 
 import "@fortawesome/fontawesome-free/css/all.css";
-
 import "./assets/app.scss";
 
-Vue.config.productionTip = false;
+const app = createApp(App);
 
-Vue.component("DynamicStyle", {
-  render: function (createElement) {
-    return createElement("style", this.$slots.default);
-  },
+app.component("DynamicStyle", (_props, context) => {
+  return h("style", {}, context.slots);
 });
 
-new Vue({
-  render: (h) => h(App),
-}).$mount("#app");
+app.mount("#app");