Seit Stud.IP 4.5 ist Vue.js in Stud.IP verfügbar und wird für einige Komponenten genutzt.

§

1.  STUDIP.Vue

Mit der Version 5.0 von Stud.IP soll die Nutzung von Vue.js weiter vorangetrieben werden. Dafür werden über das Objekt STUDIP.Vue in Javascript Methoden bereitgestellt, die die Integration erleichtern sollen, indem manche Dinge abstrahiert bzw. generalisiert werden.

Vue.js wird nun als Chunk geladen und ist somit nicht mehr sofort auf jeder Seite verfügbar. Alle über STUDIP.Vue verfügbaren Methoden kümmern sich um das Laden und sind daher der präfertierte Weg, Vue.js zu nutzen.

1.1  STUDIP.Vue.register(globalComponents = false)

Über diese Methode wird Vue.js geladen und über ein Promise zurückgegeben. Der Parameter globalComponents gibt dabei an, ob alle Komponenten im Verzeichnis resources/vue/components global registriert werden sollen und somit immer und überall zur Verfügung stehen.

1.2  STUDIP.Vue.createApp(element, data = {}, options = {})

Diese Methode lädt den Vue-Chunk und erstellt eine App. Die Parameter sind wie folgt:

element

Das Wurzelelement der App

data

Die Daten für die App

options

Weitere Optionen wie methods oder computed

Diese Abstraktion ist trivial, aber soll die Erstellung einer App kapseln, falls sich die API von Vue.js ändert und einen leichten Einstieg bieten.

1.3  STUDIP.Vue.emit(eventName, ...args) und STUDIP.Vue.on(eventName, ...args)

Über diese beiden Methoden können Nachrichten und Daten zwischen Vue-Komponenten bzw. dem umliegenden System und Vue-Apps ausgetauscht werden. Intern wird ein Event-Bus realisiert, der über ein globales Mixin in jeder Vue-Komponente über die Methoden globalEmit(eventName, ...args) bzw. globalOn(eventName, ...args) bereitgestellt werden.

2.  Erstellen von Vue-Apps über das HTML-Attribut [data-vue-app]

Über das HTML-Attribut [data-vue-app] kann ohne weitere Initialisierung eine Vue-App erstellt werden. Über den Inhalt des Attributs können noch weitere Angaben zu den Daten oder verwendeten Komponenten gemacht werden, indem ein entsprechendes Objekt übergeben wird. Mögliche Optionen:

id

Die Id der App. Ist diese gesetzt und es gibt ein Objekt STUDIP.AppData, welches unter der übergebenen Id Daten bereithält, so werden diese Daten der App übergeben

components

Die von der App verwendeten Komponenten als Array. Ist dieses Array leer oder nicht gesetzt, so werden alle Vue-Komponenten registriert.