update vue2 -> vue3, fixes #3747

Closes #3747

Merge request studip/studip!3108

2 files changed, 65 insertions, 46 deletions

diff --git a/resources/assets/javascripts/chunks/avatar.js b/resources/assets/javascripts/chunks/avatar.js
deleted file mode 100644
index e69de29..0000000
--- a/resources/assets/javascripts/chunks/avatar.js
+++ /dev/null
diff --git a/resources/assets/javascripts/chunks/vue.js b/resources/assets/javascripts/chunks/vue.js
index 8d506a1..80b111e 100644
--- a/resources/assets/javascripts/chunks/vue.js
+++ b/resources/assets/javascripts/chunks/vue.js
@@ -1,70 +1,89 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import Router from "vue-router";
-import eventBus from '../lib/event-bus.ts';
-import GetTextPlugin from 'vue-gettext';
-import { getLocale, getVueConfig } from '../lib/gettext';
+import { createApp as vueCreateApp } from 'vue';
+import { createStore as vuexCreateStore } from 'vuex';
+import eventBus from '../lib/event-bus';
+import gettext from '../lib/gettext';
 import PortalVue from 'portal-vue';
 import BaseComponents from '../../../vue/base-components.js';
 import BaseDirectives from "../../../vue/base-directives.js";
 import StudipStore from "../../../vue/store/StudipStore.js";
-import CKEditor from '@ckeditor/ckeditor5-vue2';
+import { resourceModule } from '@/assets/javascripts/lib/reststate-vuex.js';
+import axios from 'axios';
 
-// Setup gettext
-Vue.use(GetTextPlugin, getVueConfig());
-eventBus.on('studip:set-locale', (locale) => {
-    Vue.config.language = locale;
-})
+import CKEditor from '@ckeditor/ckeditor5-vue';
 
-// Register global components and directives
-registerGlobalComponents();
-registerGlobalDirectives();
+const getHttpClient = () =>
+    axios.create({
+        baseURL: STUDIP.URLHelper.getURL(`jsonapi.php/v1`, {}, true),
+        headers: {
+            'Content-Type': 'application/vnd.api+json',
+        },
+    });
 
-// Setup store and default Stud.IP store
-Vue.use(Vuex);
-const store = new Vuex.Store({});
+const httpClient = getHttpClient();
 
-store.registerModule('studip', StudipStore);
+const createStore = () => {
+    const store = vuexCreateStore({});
 
-// Setup router and PortalVue
-Vue.use(Router);
-Vue.use(PortalVue);
+    store.registerModule('studip', StudipStore);
 
-// Define our own global mixin for Vue
-Vue.mixin({
-    methods: {
-        globalEmit(...args) {
-            eventBus.emit(...args);
-        },
-        globalOn(...args) {
-            eventBus.on(...args);
-        },
-        globalOff(...args) {
-            eventBus.off(...args);
-        },
-        getStudipConfig: store.getters['studip/getConfig']
-    },
-});
+    STUDIP.jsonapi_schemas.forEach((name) => {
+        store.registerModule(name, resourceModule({ name, httpClient }));
+    });
 
-Vue.use(CKEditor);
+    return store;
+}
+
+// Setup store
+const store = createStore();
 
 // Define createApp function
-function createApp(options, ...args) {
-    Vue.config.language = getLocale();
-    return new Vue({ store, ...options }, ...args);
+function createApp(options = {}, ...args) {
+    const app = vueCreateApp({ store, ...options }, ...args);
+
+    app.config.compilerOptions.whitespace = 'condense';
+
+    // Define our own global mixin for Vue
+    app.mixin({
+        methods: {
+            globalEmit(...args) {
+                eventBus.emit(...args);
+            },
+            globalOn(...args) {
+                eventBus.on(...args);
+            },
+            globalOff(...args) {
+                eventBus.off(...args);
+            },
+            getStudipConfig: store.getters['studip/getConfig']
+        },
+    });
+
+    app.use(CKEditor);
+    app.use(gettext);
+    app.use(PortalVue);
+    app.use(store);
+
+    // Register global components and directives
+    registerGlobalComponents(app);
+    registerGlobalDirectives(app);
+
+    if (options.el) {
+        app.mount(options.el);
+    }
+    return app;
 }
 
 // Define global registration functions for components and directives
-function registerGlobalComponents() {
+function registerGlobalComponents(app) {
     for (const [name, component] of Object.entries(BaseComponents)) {
-        Vue.component(name, component);
+        app.component(name, component);
     }
 }
 
-function registerGlobalDirectives() {
+function registerGlobalDirectives(app) {
     for (const [name, directive] of Object.entries(BaseDirectives)) {
-        Vue.directive(name, directive);
+        app.directive(name, directive);
     }
 }
 
-export { Vue, createApp, eventBus, store };
+export { createApp, eventBus, store, httpClient };