app/controllers/admin/cache.php

@@ -64,19 +64,21 @@ class Admin_CacheController extends AuthenticatedController
      */
     public function settings_action()
     {
-        if ($this->enabled) {
-            $this->types = CacheType::findAndMapBySQL(function (CacheType $type) {
-                return $type->toArray();
-            }, "1 ORDER BY `cache_id`");
-
-            $currentCache = Config::get()->SYSTEMCACHE;
-            $currentCacheClass = CacheType::findOneByClass_name($currentCache['type']);
-            $this->cache = $currentCacheClass->class_name;
-            $this->config = $currentCacheClass->class_name::getConfig();
-        } else {
-            PageLayout::postWarning(
-                _('Caching ist systemweit ausgeschaltet, daher kann hier nichts konfiguriert werden.'));
-        }
+        $currentCache = Config::get()->SYSTEMCACHE;
+        $currentCacheClass = CacheType::findOneByClass_name($currentCache['type']);
+
+        $this->render_vue_app(
+            Studip\VueApp::create('CacheAdministration')
+                ->withProps([
+                    'enabled' => $this->enabled,
+                    'cache' => $currentCacheClass->class_name,
+                    'config' => $currentCacheClass->class_name::getConfig(),
+                    'types' => CacheType::findAndMapBySQL(
+                        fn(CacheType $type) => $type->toArray(),
+                        "1 ORDER BY `cache_id`"
+                    ),
+                ])
+        );
     }
 
     /**

app/controllers/admin/courses.php

@@ -305,15 +305,9 @@ class Admin_CoursesController extends AuthenticatedController
         $this->fields = $this->getViewFilters();
         $this->sortby = $GLOBALS['user']->cfg->MEINE_SEMINARE_SORT ?? (Config::get()->IMPORTANT_SEMNUMBER ? 'number' : 'name');
         $this->sortflag = $GLOBALS['user']->cfg->MEINE_SEMINARE_SORT_FLAG ?? 'ASC';
+        $this->store_data = $this->getStoreData();
 
         $this->buildSidebar();
-
-        PageLayout::addHeadElement('script', [
-            'type' => 'text/javascript',
-        ], sprintf(
-              'window.AdminCoursesStoreData = %s;',
-              json_encode($this->getStoreData())
-        ));
     }
 
     private function getStoreData(): array

app/controllers/admin/tree.php

@@ -7,10 +7,28 @@ class Admin_TreeController extends AuthenticatedController
         $GLOBALS['perm']->check('root');
         Navigation::activateItem('/admin/locations/range_tree');
         PageLayout::setTitle(_('Einrichtungshierarchie bearbeiten'));
-        $this->startId = Request::get('node_id', 'RangeTreeNode_root');
+
         $this->semester = Request::option('semester', Semester::findCurrent()->id);
         $this->classname = RangeTreeNode::class;
         $this->setupSidebar();
+
+        $this->render_vue_app(
+            Studip\VueApp::create('tree/StudipTree')
+                ->withProps([
+                    'breadcrumb-icon'              => 'institute',
+                    'create-url'                   => $this->createURL(),
+                    'delete-url'                   => $this->deleteURL(),
+                    'edit-url'                     => $this->editURL(),
+                    'editable'                     => true,
+                    'semester'                     => $this->semester,
+                    'show-structure-as-navigation' => true,
+                    'start-id'                     => Request::get('node_id', 'RangeTreeNode_root'),
+                    'title'                        => _('Einrichtungshierarchie bearbeiten'),
+                    'view-type'                    => 'table',
+                    'visible-children-only'        => false,
+                    'with-courses'                 => true,
+                ])
+        );
     }
 
     public function semtree_action()
@@ -18,10 +36,30 @@ class Admin_TreeController extends AuthenticatedController
         $GLOBALS['perm']->check('root');
         Navigation::activateItem('/admin/locations/sem_tree');
         PageLayout::setTitle(_('Veranstaltungshierarchie bearbeiten'));
-        $this->startId = Request::get('node_id', 'StudipStudyArea_root');
+
+
         $this->semester = Request::option('semester', Semester::findCurrent()->id);
         $this->classname = StudipStudyArea::class;
         $this->setupSidebar();
+
+        $this->render_vue_app(
+            Studip\VueApp::create('tree/StudipTree')
+                ->withProps([
+                    'breadcrumb-icon'              => 'literature',
+                    'create-url'                   => $this->createURL(),
+                    'delete-url'                   => $this->deleteURL(),
+                    'edit-url'                     => $this->editURL(),
+                    'editable'                     => true,
+                    'semester'                     => $this->semester,
+                    'show-structure-as-navigation' => true,
+                    'start-id'                     => Request::get('node_id', 'StudipStudyArea_root'),
+                    'title'                        => _('Veranstaltungshierarchie bearbeiten'),
+                    'view-type'                    => 'table',
+                    'visible-children-only'        => false,
+                    'with-course-assign'           => true,
+                    'with-courses'                 => true,
+                ])
+        );
     }
 
     /**

app/controllers/course/contentmodules.php

@@ -83,18 +83,16 @@ class Course_ContentmodulesController extends AuthenticatedController
             Sidebar::Get()->addWidget($widget);
         }
 
-        PageLayout::addHeadElement('script', [
-            'type' => 'text/javascript',
-        ], sprintf(
-            'window.ContentModulesStoreData = %s;',
-            json_encode([
-                'setCategories' => $this->categories,
-                'setHighlighted' => $this->highlighted_modules,
-                'setModules' => array_values($this->modules),
-                'setUserId' => User::findCurrent()->id,
-                'setView' => $GLOBALS['user']->cfg->CONTENTMODULES_TILED_DISPLAY ? 'tiles' : 'table',
-            ])
-        ));
+        $this->render_vue_app(
+            Studip\VueApp::create('ContentModules')
+                ->withStore('ContentModulesStore', 'contentmodules', [
+                    'setCategories'  => $this->categories,
+                    'setHighlighted' => $this->highlighted_modules,
+                    'setModules'     => array_values($this->modules),
+                    'setUserId'      => User::findCurrent()->id,
+                    'setView'        => $GLOBALS['user']->cfg->CONTENTMODULES_TILED_DISPLAY ? 'tiles' : 'table',
+                ])
+        );
     }
 
     public function trigger_action()

app/controllers/my_courses.php

@@ -113,13 +113,13 @@ class MyCoursesController extends AuthenticatedController
         }
 
         $this->setupSidebar($sem_key, $group_field, $this->check_for_new($sem_courses, $group_field));
-        $data = $this->getMyCoursesData($sem_courses, $group_field);
 
-        PageLayout::addHeadElement(
-            'script',
-            ['type' => 'text/javascript'],
-            'window.STUDIP.MyCoursesData = ' . json_encode($data) . ';'
-        );
+        $this->vueApp = Studip\VueApp::create('MyCourses')
+            ->withStore(
+                'MyCoursesStore',
+                'mycourses',
+                $this->getMyCoursesData($sem_courses, $group_field)
+            );
     }
 
     /**
@@ -797,10 +797,10 @@ class MyCoursesController extends AuthenticatedController
         }
 
         return [
-            'courses' => $this->sanitizeNavigations(array_map([$this, 'convertCourse'], $temp_courses)),
-            'groups'  => $groups,
-            'user_id' => $GLOBALS['user']->id,
-            'config'  => [
+            'setCourses' => $this->sanitizeNavigations(array_map([$this, 'convertCourse'], $temp_courses)),
+            'setGroups'  => $groups,
+            'setUserId'  => $GLOBALS['user']->id,
+            'setConfig'  => [
                 'allow_dozent_visibility'  => Config::get()->ALLOW_DOZENT_VISIBILITY,
                 'open_groups'              => array_values($GLOBALS['user']->cfg->MY_COURSES_OPEN_GROUPS),
                 'sem_number'               => Config::get()->IMPORTANT_SEMNUMBER,

app/controllers/search/courses.php

@@ -59,6 +59,21 @@ class Search_CoursesController extends AuthenticatedController
 
         $this->setupSidebar();
         PageLayout::setTitle($title);
+
+        $this->render_vue_app(
+            Studip\VueApp::create('tree/StudipTree')
+                ->withProps([
+                    'breadcrumb-icon' => $this->breadcrumbIcon,
+                    'sem-class'       => $this->semClass,
+                    'semester'        => $this->semester,
+                    'start-id'        => $this->startId,
+                    'title'           => $this->treeTitle,
+                    'view-type'       => $this->show_as,
+                    'with-courses'    => true,
+                    'with-export'     => true,
+                    'with-search'     => true,
+                ])
+        );
     }
 
     private function setupSidebar()

app/views/admin/cache/settings.php

-<?php
-/**
- * @var boolean $enabled
- * @var array $types
- * @var array $config
- * @var string $cache
- */
-?>
-<? if ($enabled) : ?>
-    <div id="cache-admin-container">
-        <cache-administration :cache-types='<?= htmlReady(json_encode($types)) ?>' current-cache="<?= htmlReady($cache) ?>"
-                     :current-config='<?= htmlReady(json_encode($config)) ?>'></cache-administration>
-    </div>
-<? endif;

app/views/admin/courses/index.php

@@ -9,6 +9,7 @@
  * @var string $sortflag
  * @var array $activeSidebarElements
  * @var int $max_show_courses
+ * @var array $store_data
  */
 
 $unsortable_fields = [
@@ -17,29 +18,18 @@ $unsortable_fields = [
     'contents'
 ];
 ?>
-
 <? if (empty($insts)): ?>
     <?= MessageBox::info(sprintf(_('Sie wurden noch keinen Einrichtungen zugeordnet. Bitte wenden Sie sich an einen der zuständigen %sAdministratoren%s.'), '<a href="' . URLHelper::getLink('dispatch.php/siteinfo/show') . '">', '</a>')) ?>
-<? else :
-
-    $attributes = [
-        ':show-complete' => json_encode((bool) Config::get()->ADMIN_COURSES_SHOW_COMPLETE),
-        ':fields' => json_encode($fields),
-        ':unsortable-fields' => json_encode($unsortable_fields),
-        ':max-courses' => (int) $max_show_courses,
-        'sort-by' => $sortby,
-        'sort-flag' => $sortflag,
-    ];
-?>
-    <form method="post">
-        <?= CSRFProtection::tokenTag() ?>
-
-        <div class="admin-courses-vue-app course-admin"
-             is="AdminCourses"
-             v-cloak
-             ref="app"
-             <?= arrayToHtmlAttributes($attributes) ?>
-        ></div>
-    </form>
+<? else: ?>
+    <?= Studip\VueApp::create('AdminCourses')
+            ->withProps([
+                'show-complete' => (bool) Config::get()->ADMIN_COURSES_SHOW_COMPLETE,
+                'fields' => $fields,
+                'unsortable-fields' => $unsortable_fields,
+                'max-courses' => (int) $max_show_courses,
+                'sort-by' => $sortby,
+                'sort-flag' => $sortflag,
+            ])
+            ->withStore('AdminCoursesStore', 'admincourses', $store_data) ?>
 
 <? endif; ?>

app/views/admin/tree/batch_assign_semtree.php

@@ -2,10 +2,12 @@
     <?= CSRFProtection::tokenTag() ?>
     <fieldset>
         <legend><?= _('Studienbereichszuordnungen der ausgewählten Veranstaltungen bearbeiten') ?></legend>
-        <div data-studip-tree>
-            <studip-tree start-id="StudipStudyArea_root" :with-info="false" :open-levels="1"
-                         :assignable="true"></studip-tree>
-        </div>
+        <?= Studip\VueApp::create('tree/StudipTree')->withProps([
+            'assignable'  => true,
+            'open-levels' => 1,
+            'start-id'    => 'StudipStudyArea_root',
+            'with-info'   => false,
+        ]) ?>
     </fieldset>
     <fieldset>
         <legend><?= _('Diese Veranstaltungen werden zugewiesen') ?></legend>

app/views/admin/tree/rangetree.php

-<div data-studip-tree>
-    <studip-tree start-id="<?= htmlReady($startId) ?>" view-type="table" breadcrumb-icon="institute"
-                 :with-search="false" :visible-children-only="false"
-                 :editable="true" edit-url="<?= $controller->url_for('admin/tree/edit') ?>"
-                 create-url="<?= $controller->url_for('admin/tree/create') ?>"
-                 delete-url="<?= $controller->url_for('admin/tree/delete') ?>"
-                 :with-courses="true" semester="<?= htmlReady($semester) ?>" :show-structure-as-navigation="true"
-                 title="<?= _('Einrichtungshierarchie bearbeiten') ?>"></studip-tree>
-</div>

app/views/admin/tree/semtree.php

-<div data-studip-tree>
-    <studip-tree start-id="<?= htmlReady($startId) ?>" view-type="table" breadcrumb-icon="literature"
-                 :with-search="false" :visible-children-only="false"
-                 :editable="true" edit-url="<?= $controller->url_for('admin/tree/edit') ?>"
-                 create-url="<?= $controller->url_for('admin/tree/create') ?>"
-                 delete-url="<?= $controller->url_for('admin/tree/delete') ?>"
-                 :show-structure-as-navigation="true" :with-course-assign="true"
-                 :with-courses="true" semester="<?= htmlReady($semester) ?>"
-                 title="<?= _('Veranstaltungshierarchie bearbeiten') ?>"></studip-tree>
-</div>

app/views/course/contentmodules/index.php

-<div class="content-modules-vue-app" is="ContentModules"></div>

app/views/course/contentmodules/info.php

@@ -18,7 +18,9 @@
                 <? endif; ?>
                 </div>
             </div>
-            <div class="content-modules-controls-vue-app" is="ContentModulesControl" module_id="<?= htmlReady($plugin->getPluginId()) ?>"></div>
+            <?= Studip\VueApp::create('ContentModulesControl')->withProps([
+                 'module_id' => (string) $plugin->getPluginId(),
+            ]) ?>
             <? $keywords = preg_split( "/;/", $metadata['keywords'] ?? '', -1, PREG_SPLIT_NO_EMPTY) ?>
             <? if (count($keywords) > 0) : ?>
             <ul class="keywords">

app/views/my_courses/index.php

+<?php
+/**
+ * @var Studip\VueApp $vueApp
+ * @var array $my_bosses
+ * @var array $waiting_list
+ */
+?>
 <? if ($waiting_list) : ?>
     <?= $this->render_partial('my_courses/waiting_list.php', compact('waiting_list')) ?>
 <? endif ?>
 
-<div class="my-courses-vue-app">
-    <my-courses />
-</div>
+<?= $vueApp->render() ?>
 
 <? if (count($my_bosses) > 0) : ?>
     <?= $this->render_partial('my_courses/_deputy_bosses'); ?>

app/views/oer/addfile/choose_file.php

@@ -9,15 +9,14 @@ if ($best_nine_tags && count($best_nine_tags) > 0) {
     }
 }
 ?>
-<form class="oer_search"
-      action="<?= $controller->link_for("oer/market/search") ?>"
-      method="GET"
-      data-searchresults="<?= htmlReady(json_encode($material_data)) ?>"
-      data-filteredtag="<?= htmlReady(Request::get("tag")) ?>"
-      data-filteredcategory="<?= htmlReady(Request::get("category")) ?>"
-      data-tags="<?= htmlReady(json_encode($tags)) ?>"
-      data-material_select_url_template="<?= htmlReady($controller->url_for("oer/addfile/choose_file", ['material_id' => "__material_id__", 'to_plugin' => Request::get("to_plugin"), 'to_folder_id' => Request::get("to_folder_id")])) ?>">
-    <input type="hidden" name="to_plugin" value="<?= htmlReady(Request::get("to_plugin")) ?>">
-    <input type="hidden" name="to_folder_id" value="<?= htmlReady(Request::get("to_folder_id")) ?>">
-    <?= $this->render_partial("oer/market/_searchform") ?>
-</form>
+<?= Studip\VueApp::create('OERSearch')
+    ->withProps([
+        'url' => $controller->url_for('oer/market/search'),
+        'search-results' => $material_data ?? false,
+        'filtered-tag' => Request::get('tag'),
+        'filtered-category' => Request::get('category'),
+        'tags' => $tags,
+        'material-select-url-template' => $controller->url_for('oer/addfile/choose_file', ['material_id' => '__material_id__']),
+        'to-plugin' => Request::get('to_plugin'),
+        'to-folder-id' => Request::get('to_folder_id'),
+    ])  ?>

app/views/oer/market/_searchform.php

-<div class="searchform">
-    <div class="oneliner">
-        <div class="frame">
-            <span v-if="category != null"
-                  class="category activefilter" title="<?= _('Aktiver Filter der Kategorie') ?>">
-                <span>{{ category }}</span>
-                <a href="#"
-                   @click.prevent="clearCategory"
-                   class="erasefilter"
-                   title="<?= _('Filter der Kategorie entfernen') ?>">
-                    <studip-icon shape="decline" role="clickable" :size="16" class="text-bottom"></studip-icon>
-                </a>
-            </span>
-
-            <span v-if="difficulty[0] != 1 || difficulty[1] != 12"
-                  class="niveau activefilter"
-                  title="<?= _('Aktiver Filter für das Niveau') ?>">
-                <?= _('Niveau') ?>: &nbsp;
-                <span>{{ difficulty[0] }}</span>
-                -
-                <span>{{ difficulty[1] }}</span>
-                <a href="#"
-                   @click.prevent="clearDifficulty"
-                   class="erasefilter"
-                   title="<?= _('Filter des Niveaus entfernen') ?>">
-                    <studip-icon shape="decline" role="clickable" :size="16" class="text-bottom"></studip-icon>
-                </a>
-            </span>
-
-            <input type="text"
-                   name="search"
-                   @focus="showFilterPanel"
-                   @keyup="sync_search_text"
-                   @keydown.enter.prevent="search">
-
-            <button v-if="difficulty[0] != 1 || difficulty[1] != 12 || (category != null) || (searchtext.length > 0)"
-                    class="erase"
-                    type="button"
-                    title="<?= _('Suchformular zurücksetzen') ?>"
-                    @click="clearAllFilters">
-                <studip-icon shape="decline" role="clickable"></studip-icon>
-            </button>
-
-            <button @click="triggerFilterPanel"
-                    type="button"
-                    title="<?= _('Suchfilter einstellen') ?>"
-                    :class="activeFilterPanel ? 'active' : ''">
-                <studip-icon shape="filter" :role="activeFilterPanel ? 'info_alt' : 'clickable'"></studip-icon>
-            </button>
-
-            <div v-if="activeFilterPanel" class="filterpanel_shadow"></div>
-
-            <div v-if="activeFilterPanel" class="filterpanel">
-                <div>
-                    <h3><?= _('Kategorien') ?></h3>
-                    <ul class="clean">
-                        <li>
-                            <a href="<?= $controller->link_for("oer/market", ['category' => "audio"]) ?>" @click.prevent="category = 'audio'">
-                                <studip-icon v-if="category != 'audio'" shape="radiobutton-unchecked" role="clickable" :size="16" class="text-bottom"></studip-icon>
-                                <studip-icon v-if="category == 'audio'" shape="radiobutton-checked" role="clickable" :size="16" class="text-bottom"></studip-icon>
-                                <?= _('Audio') ?>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="<?= $controller->link_for("oer/market", ['category' => "video"]) ?>" @click.prevent="category = 'video'">
-                                <studip-icon v-if="category != 'video'" shape="radiobutton-unchecked" role="clickable" :size="16" class="text-bottom"></studip-icon>
-                                <studip-icon v-if="category == 'video'" shape="radiobutton-checked" role="clickable" :size="16" class="text-bottom"></studip-icon>
-                                <?= _('Video') ?>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="<?= $controller->link_for("oer/market", ['category' => "presentation"]) ?>" @click.prevent="category = 'presentation'">
-                                <studip-icon v-if="category != 'presentation'" shape="radiobutton-unchecked" role="clickable" :size="16" class="text-bottom"></studip-icon>
-                                <studip-icon v-if="category == 'presentation'" shape="radiobutton-checked" role="clickable" :size="16" class="text-bottom"></studip-icon>
-                                <?= _('Folien') ?>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="<?= $controller->link_for("oer/market", ['category' => "elearning"]) ?>" @click.prevent="category = 'elearning'">
-                                <studip-icon v-if="category != 'elearning'" shape="radiobutton-unchecked" role="clickable" :size="16" class="text-bottom"></studip-icon>
-                                <studip-icon v-if="category == 'elearning'" shape="radiobutton-checked" role="clickable" :size="16" class="text-bottom"></studip-icon>
-                                <?= _('Lernmodule') ?>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="<?= $controller->link_for("oer/market", ['get' => "all"]) ?>">
-                                <studip-icon shape="link-intern" role="clickable" :size="16" class="text-bottom"></studip-icon>
-                                <?= _('Alles') ?>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="level_filter">
-                    <h3><?= _('Niveau') ?></h3>
-                    <div class="level_labels">
-                        <div><?= _('Leicht') ?></div>
-                        <div><?= _('Schwer') ?></div>
-                    </div>
-                    <div class="level_numbers">
-                        <? for ($i = 1; $i <= 12; $i++) : ?>
-                            <div><?= ($i < 10 ? "&nbsp;" : "").$i ?></div>
-                        <? endfor ?>
-                    </div>
-                    <div id="difficulty_slider"></div>
-
-                    <input type="hidden" id="difficulty" name="difficulty" value="">
-                </div>
-            </div>
-
-
-            <button title="<?= _('Suche starten') ?>" @click.prevent="search" @focus="hideFilterPanel">
-                <studip-icon shape="search" role="clickable"></studip-icon>
-            </button>
-        </div>
-
-    </div>
-
-
-</div>
-
-<div class="browser">
-
-    <div v-if="browseMode === false" class="intro">
-        <img src="<?= Assets::image_path("oer-keyvisual-negative.svg") ?>" class="illustration responsive-hidden">
-        <div>
-            <h3><?= _('Wertvolle Lernmaterialien entdecken!') ?></h3>
-            <div class="responsive-hidden">
-                <?= _('Neue und spannende Lernmaterialien zu finden, ist ganz einfach. Mit dem Entdeckermodus können Sie nach Schlagwörtern stöbern und durch Themengebiete surfen.') ?>
-            </div>
-
-            <div>
-                <?= \Studip\LinkButton::create(_('Zum Entdeckermodus'), "#", ['@click.prevent' => "browseMode=true"]) ?>
-            </div>
-        </div>
-    </div>
-
-    <div v-if="browseMode === true" class="tagcloud">
-        <div>
-            <h3><?= _('Wertvolle Materialien entdecken!') ?></h3>
-            <?= _('Klicken Sie auf die Schlagwörter und entdecken Sie Lernmaterialien zum Thema.') ?>
-        </div>
-        <a href="" @click.prevent="backInCloud" class="back-button">
-            <studip-icon shape="arr_1left" role="clickable" :size="50"></studip-icon>
-        </a>
-        <ul class="tags clean">
-            <li v-for="tag in tags">
-                <a href="#"
-                   class="button"
-                   :style="getTagStyle(tag.tag_hash)"
-                   :title="tag.name"
-                   @click.prevent="browseTag(tag.tag_hash, tag.name)">{{"#" + tag.name}}</a>
-            </li>
-        </ul>
-    </div>
-
-</div>
-
-<div v-if="results && results.length === 0" class="oer_no_results">
-    <?= MessageBox::info(_('Keine Ergebnisse gefunden.'))?>
-</div>
-
-<ul class="results oer_material_overview" v-if="results && results.length > 0">
-    <li v-for="result in results" :key="result.material_id">
-        <article class="contentbox" :title="result.name">
-            <a :href="getMaterialURL(result.material_id)" target="_blank">
-                <header>
-                    <h1>
-                        <studip-icon :shape="getIconShape(result)"
-                                     role="clickable"
-                                     :size="20"
-                                     class="text-bottom"></studip-icon>
-                        {{ shortenName(result.name) }}
-                    </h1>
-                </header>
-                <div class="image" :style="'background-image: url(' + result.logo_url + ');' + (!result.front_image_content_type ? ' background-size: 60% auto;': '')"></div>
-            </a>
-        </article>
-    </li>
-</ul>

app/views/oer/market/index.php

@@ -6,17 +6,15 @@
  * @var OERMaterial[] $new_ones
  */
 ?>
-<form class="oer_search"
-      action="<?= $controller->search() ?>"
-      method="GET" aria-live="polite"
-      data-searchresults="<?= htmlReady(json_encode($material_data)) ?>"
-      data-filteredtag="<?= htmlReady(Request::get('tag')) ?>"
-      data-filteredcategory="<?= htmlReady(Request::get('category')) ?>"
-      data-tags="<?= htmlReady(json_encode($tags)) ?>"
-      data-material_select_url_template="<?= htmlReady($controller->detailsURL('__material_id__')) ?>">
-    <?= $this->render_partial('oer/market/_searchform') ?>
-</form>
-
+<?= Studip\VueApp::create('OERSearch')
+        ->withProps([
+            'url' => $controller->link_for('oer/market/search'),
+            'search-results' => $material_data,
+            'filtered-tag' => Request::get('tag'),
+            'filtered-category' => Request::get('category'),
+            'tags' => $tags,
+            'material-select-url-template' => $controller->detailsURL('__material_id__'),
+        ])  ?>
 
 <? if (!empty($new_ones)) : ?>
     <div id="new_ones">
@@ -26,10 +24,3 @@
         </ul>
     </div>
 <? endif ?>
-
-
-
-
-
-
-<?

app/views/search/courses/index.php

-<?php
-/**
- * @var String $startId
- * @var String $show_as
- * @var String $treeTitle
- * @var String $breadcrumIcon
- * @var String $semester
- * @var String $semClass
- */
-?>
-<div data-studip-tree>
-    <studip-tree start-id="<?= htmlReady($startId) ?>" view-type="<?= htmlReady($show_as) ?>" :visible-children-only="true"
-                 title="<?= htmlReady($treeTitle) ?>" breadcrumb-icon="<?= htmlReady($breadcrumbIcon) ?>"
-                 :with-search="true" :with-export="true" :with-courses="true" semester="<?= htmlReady($semester) ?>"
-                 :sem-class="<?= htmlReady($semClass) ?>" :with-export="true"></studip-tree>
-</div>

lib/classes/StudipController.php

@@ -588,6 +588,11 @@ abstract class StudipController extends Trails\Controller
         $this->render_text($form->render());
     }
 
+    public function render_vue_app(\Studip\VueApp $app): void
+    {
+        $this->render_template($app->getTemplate(), $this->layout);
+    }
+
     /**
      * 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;
+
+use Flexi\Template;
+use Stringable;
+
+final class VueApp implements Stringable
+{
+    public static function create(string $base_component): VueApp
+    {
+        return new self($base_component);
+    }
+
+    private array $components = [];
+    private array $props = [];
+    private array $stores = [];
+    private array $storeData = [];
+
+    private function __construct(private readonly string $base_component) {
+    }
+
+    public function withComponents(string ...$components): VueApp
+    {
+        $clone = clone $this;
+        foreach ($components as $component) {
+            $clone = $clone->withAddedComponent($component);
+        }
+        return $clone;
+    }
+
+    public function withAddedComponent(string $component): VueApp
+    {
+        $clone = clone $this;
+        if (!in_array($component, $clone->components)) {
+            $clone->components[] = $component;
+        }
+        return $clone;
+    }
+
+    public function getBaseComponent(): string
+    {
+        return $this->base_component;
+    }
+
+    public function withProps(array $props): VueApp
+    {
+        $clone = clone $this;
+        $clone->props = $props;
+        return $clone;
+    }
+
+    public function getProps(): array
+    {
+        return $this->props;
+    }
+
+    public function withStore(?string $store, ?string $index = null, ?array $data = null): VueApp
+    {
+        $clone = clone $this;
+
+        $clone->stores[$index ?? $store] = $store;
+
+        if ($data !== null) {
+            $clone->storeData[$index ?? $store] = $data;
+        }
+
+        return $clone;
+    }
+
+    public function getStores(): array
+    {
+        return $this->stores;
+    }
+
+    public function getStoreData(): array
+    {
+        return $this->storeData;
+    }
+
+    public function getTemplate(): Template
+    {
+        $data = [
+            'components' => [
+                $this->base_component,
+                ...$this->components
+            ],
+        ];
+
+        if (count($this->stores) > 0) {
+            $data['stores'] = $this->stores;
+        }
+
+        $template = $GLOBALS['template_factory']->open('vue-app.php');
+        $template->attributes = [
+            'data-vue-app' => json_encode($data),
+            'is' => basename($this->base_component),
+
+            ...$this->getPreparedProps(),
+        ];
+        $template->storeData = $this->storeData;
+        return $template;
+    }
+
+    private function getPreparedProps(): array
+    {
+        $result = [];
+        foreach ($this->props as $name => $value) {
+            $name = ltrim($name, ':');
+            $result[":{$name}"] = json_encode($value);
+        }
+        return $result;
+    }
+
+    public function render(): string
+    {
+        \NotificationCenter::postNotification('VueAppWillRender', $this);
+
+        $content = $this->getTemplate()->render();
+
+        \NotificationCenter::postNotification('VueAppDidRender', $this);
+
+        return $content;
+    }
+
+    public function __toString(): string
+    {
+        return $this->render();
+    }
+}