Update dependencies to Vue3

package.json

@@ -16,9 +16,10 @@
     "cy:run-ct": "cypress run --component"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.6",
     "axios": "^1.2.0",
-    "bootstrap": "^4.6.0",
+    "bootstrap": "^5.2.2",
-    "bootstrap-vue": "^2.23.1",
+    "bootstrap-vue-3": "^0.3.12",
     "bootswatch": "^5.2.2",
     "core-js": "^3.26.1",
     "date-fns": "^2.29.3",
@@ -28,14 +29,15 @@
     "humanize-duration": "^3.27.3",
     "pinia": "^2.0.27",
     "pinia-plugin-persistedstate": "^3.0.1",
-    "vue": "^2.7.14",
+    "vue": "3.2.42",
     "vue-class-component": "^7.2.5",
     "vue-demi": "0.13.11",
     "vue-echarts": "^6.2.3",
     "vue-grid-layout": "^2.4.0",
     "vue-material-design-icons": "^5.1.2",
-    "vue-router": "^3.6.5",
+    "vue-router": "^4.1.6",
-    "vue-select": "^3.20.0"
+    "vue-select": "^4.0.0-beta.5",
+    "vue3-drr-grid-layout": "^1.9.6"
   },
   "devDependencies": {
     "@cypress/vite-dev-server": "^4.0.1",
@@ -44,8 +46,8 @@
     "@types/jest": "^27.5.0",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^5.45.0",
-    "@vitejs/plugin-vue2": "^1.1.2",
+    "@vitejs/plugin-vue": "^1.2.2",
-    "@vue/composition-api": "^1.7.1",
+    "@vue/compiler-sfc": "3.2.42",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.1.0",
     "@vue/runtime-dom": "^3.2.45",
@@ -56,7 +58,6 @@
     "eslint-plugin-vue": "^7.20.0",
     "jest": "^27.5.1",
     "mutationobserver-shim": "^0.3.7",
-    "popper.js": "^1.16.1",
     "portal-vue": "^2.1.7",
     "prettier": "^2.8.0",
     "sass": "^1.56.1",
@@ -65,7 +66,6 @@
     "typescript": "~4.9.3",
     "vite": "^2.9.14",
     "vite-jest": "^0.1.4",
-    "vue-template-compiler": "^2.7.14",
     "vue-tsc": "^1.0.10"
   }
 }

src/main.ts

@@ -1,20 +1,21 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
-import './plugins/bootstrap-vue';
+import { BootstrapVue3 } from './plugins/bootstrap-vue';
 import App from './App.vue';
 import router from './router';
 import { createPinia, PiniaVuePlugin } from 'pinia';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
-import VueRouter from 'vue-router';
+import GridLayout from 'vue3-drr-grid-layout';
 
-Vue.use(PiniaVuePlugin);
+const myApp = createApp(App);
+
+myApp.use(PiniaVuePlugin);
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
+myApp.use(pinia);
 
-Vue.use(VueRouter);
+myApp.use(router);
+myApp.use(BootstrapVue3);
+myApp.use(GridLayout);
 
-Vue.config.productionTip = false;
+// Vue.config.productionTip = false;
-new Vue({
+myApp.mount('#app');
-  router,
-  render: (h) => h(App),
-  pinia,
-}).$mount('#app');

src/plugins/bootstrap-vue.ts

@@ -1,7 +1,7 @@
-import Vue from 'vue';
+import BootstrapVue3 from 'bootstrap-vue-3';
-
+import 'bootstrap/dist/css/bootstrap.css';
-import BootstrapVue from 'bootstrap-vue';
+import 'bootstrap-vue-3/dist/bootstrap-vue-3.css';
 
 import '@/styles/main.scss';
 
-Vue.use(BootstrapVue);
+export { BootstrapVue3 };

src/router/index.ts

@@ -1,7 +1,7 @@
-import VueRouter, { RouteConfig } from 'vue-router';
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 import { initBots, useBotStore } from '@/stores/ftbotwrapper';
 
-const routes: Array<RouteConfig> = [
+const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Home',
@@ -68,14 +68,14 @@ const routes: Array<RouteConfig> = [
     },
   },
   {
-    path: '*',
+    path: '/(.*)*',
     name: '404',
     component: () => import('@/views/Error404.vue'),
   },
 ];
 
-const router = new VueRouter({
+const router = createRouter({
-  mode: 'history',
+  history: createWebHistory(),
   base: import.meta.env.BASE_URL,
   routes,
 });

src/styles/main.scss

@@ -2,8 +2,9 @@
 @import 'bootstrap_variables_ovw';
 
 @import 'bootstrap/scss/bootstrap';
-@import 'bootstrap-vue/src/index';
+// @import 'bootstrap-vue/src/index';
 
-@import "vue-select/src/scss/vue-select.scss";
+// @import "vue-select/src/scss/vue-select.scss";
+@import 'vue-select/dist/vue-select.css';
 @import 'variables';
 @import 'styles_ovw';

tsconfig.json

@@ -35,10 +35,10 @@
   ],
   "vueCompilerOptions": {
     "experimentalImplicitWrapComponentOptionsWithDefineComponent": false,
-    "target": 2.7,
+    "target": 3,
     "experimentalTemplateCompilerOptions": {
       "compatConfig": {
-        "MODE": 2
+        "MODE": 3
       } // optional
     },
     "experimentalModelPropName": {

vite.config.js

@@ -1,17 +1,14 @@
 import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue2';
+import createVuePlugin from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [createVuePlugin({})],
   resolve: {
-    alias: [
+    alias: {
-      {
+      '@': resolve(__dirname, 'src'),
-        find: '@',
+    },
-        replacement: resolve(__dirname, 'src'),
-      },
-    ],
   },
   build: {
     chunkSizeWarningLimit: 700, // Default is 500