wip

app/controllers/my_courses.php

@@ -120,6 +120,12 @@ class MyCoursesController extends AuthenticatedController
             ['type' => 'text/javascript'],
             'window.STUDIP.MyCoursesData = ' . json_encode($data) . ';'
         );
+
+        $this->render_vue_app(
+            Studip\VueApp::create('MyCourses')
+                ->withStore('MyCoursesStore')
+                ->withStoreData('mycourses', $data)
+        );
     }
 
     /**

lib/classes/StudipController.php

@@ -588,6 +588,45 @@ abstract class StudipController extends Trails\Controller
         $this->render_text($form->render());
     }
 
+    public function render_vue_app(\Studip\VueApp $app): void
+    {
+        $attributes = [
+            'data-vue-app' => json_encode([
+                'components' => [$app->getBaseComponent()],
+                'store'      => $app->getStore(),
+            ]),
+            'is' => $app->getBaseComponent(),
+
+            ...$app->getProps(),
+        ];
+
+        $content = '';
+
+        if ($app->getStoreData()) {
+            $content .= '<script>';
+            foreach ($app->getStoreData() as $key => $data) {
+                $content .= sprintf(
+                    "window.STUDIP.Vue.setStoreData('%s', %s);",
+                    $key,
+                    json_encode($data),
+                );
+            }
+            $content .= '</script>';
+        }
+
+        $content .= '<div ' . arrayToHtmlAttributes($attributes) . '></div>';
+
+
+        if ($this->layout) {
+            $content = $this->get_template_factory()->render(
+                $this->layout,
+                ['content_for_layout' => $content]
+            );
+        }
+
+        $this->render_text($content);
+    }
+
     /**
      * relays current request to another controller and returns the response
      * the other controller is given all assigned properties, additional parameters are passed

lib/classes/VueApp.php

+<?php
+namespace Studip;
+
+class VueApp
+{
+    public static function create(string $base_component, array $props = []): VueApp
+    {
+        return new self($base_component, $props);
+    }
+
+    protected ?string $store = null;
+    protected array $storeData = [];
+
+    public function __construct(
+        protected string $base_component,
+        protected array $props = []
+    ) {
+    }
+
+    public function withBaseComponent(string $base_component): VueApp
+    {
+        $this->base_component = $base_component;
+        return $this;
+    }
+
+    public function getBaseComponent(): string
+    {
+        return $this->base_component;
+    }
+
+    public function withProps(array $props): VueApp
+    {
+        $this->props = $props;
+        return $this;
+    }
+
+    public function getProps(): array
+    {
+        return $this->props;
+    }
+
+    public function withStore(?string $store): VueApp
+    {
+        $this->store = $store;
+        return $this;
+    }
+
+    public function getStore(): ?string
+    {
+        return $this->store;
+    }
+
+    public function withStoreData(string $key, array $data): VueApp
+    {
+        $this->storeData[$key] = $data;
+        return $this;
+    }
+
+    public function getStoreData(): array
+    {
+        return $this->storeData;
+    }
+}

resources/assets/javascripts/bootstrap/vue.js

@@ -33,7 +33,7 @@ STUDIP.ready(() => {
                 const storeConfig = await import(`../../../vue/store/${config.store}.js`);
                 console.log('store', storeConfig.default);
 
-                store.registerModule(config.id, storeConfig.default, {root: true});
+                store.registerModule(config.id, storeConfig.default);
 
                 Object.keys(data).forEach(command => {
                     store.commit(`${config.id}/${command}`, data[command]);

resources/assets/javascripts/lib/studip-vue.js

-const load = async function () {
-    return STUDIP.loadChunk('vue');
-};
+class Vue
+{
+    static #storeData = {};
 
-const on = async function (...args) {
-    const { eventBus } = await load();
-    eventBus.on(...args);
-};
+    static async load()
+    {
+        return STUDIP.loadChunk('vue');
+    }
 
-const emit = async function (...args) {
-    const { eventBus } = await load();
-    eventBus.emit(...args);
-};
+    static async on(...args)
+    {
+        const { eventBus } = await this.load();
+        eventBus.on(...args);
+    }
 
-export default { load, on, emit };
+    static async emit(...args)
+    {
+        const { eventBus } = await this.load();
+        eventBus.emit(...args);
+    }
+
+    static setStoreData(key, data)
+    {
+        this.#storeData[key] = data;
+    }
+
+    static getStoreData(key)
+    {
+        return this.#storeData[key] ?? null;
+    }
+}
+
+export default Vue;