Lupus Decoupled 1.4: Component Previews, Canvas-Ready, and a Better JSON API Enabling Native Vue Slots

Lupus Decoupled ist die Inertia.js-inspirierte Entwicklungslösung, die moderne Frontend-Frameworks zu Drupal bringt. Seit dem Erreichen von Version 1.0 Anfang dieses Jahres hat sich die Lösung weiterentwickelt und sich dabei über Jahre hinweg im Produktiveinsatz bewährt: von mossbo, unserem Cloud-CMS, das zwei Splash Awards 2025 gewonnen hat, bis hin zu Enterprise-Deployments wie dem Volkswagen AG Infoportal, einem Multi-Brand-Kommunikationsportal.

Heute freuen wir uns, Version 1.4 anzukündigen: Ein Release, das bedeutende Verbesserungen für die Arbeit von Frontend-Entwicklern mit Drupal-Daten bringt, Component Previews einführt und die Grundlage für die Drupal Canvas-Integration legt. Dieses Release baut auf den Verbesserungen von Custom Elements 3.3 auf und funktioniert am besten mit nuxtjs-drupal-ce 2.5.

Vorschau auf Komponenten-Ebene

Eines der bisher am meisten vermissten Features war die Möglichkeit, Vue-Komponenten nahtlos direkt in Drupal als Vorschau anzuzeigen. Mit diesem Release führen wir die Integration mit nuxt-component-preview ein, einem neuen Nuxt-Modul, das wir speziell für diesen Zweck entwickelt haben und das nun standardmäßig mit nuxtjs-drupal-ce 2.5 ausgeliefert wird.

Die Einrichtung der Component Previews ist unkompliziert: Sobald der „Nuxt Preview"-Provider im Lupus Decoupled Einstellungsbildschirm ausgewählt wird, sind die Component Previews im Drupal Admin-Theme eingerichtet und einsatzbereit. Die Komponenten können dann direkt im „Manage custom element"-Bildschirm in der Vorschau angezeigt werden, während die API-Ausgabe in Drupal konfiguriert wird. So lässt sich genau sehen, wie die Vue-Komponenten gerendert werden, ohne das Admin-Interface verlassen zu müssen.

Lupus Decoupled verwendete zwar bereits JSON-Formatierung als Standard-Ausgabeformat für Custom-Elements-Inhalte, jedoch wurden in der bisherigen Struktur Slot- und Prop-Daten vermischt, was es für Frontend-Komponenten erschwerte, zwischen beiden zu unterscheiden.

Mit Version 1.4 führen wir ein explizites JSON-Format ein, das Props klar von Slots trennt. Bestehende Installationen behalten das bisherige Format für Abwärtskompatibilität, können aber jederzeit auf das explizite Format wechseln. Während wir uns hier auf Vue und Nuxt konzentrieren, funktioniert dieselbe strukturierte Ausgabe ebenso in anderen Frameworks wie React.

Sehen wir uns den Unterschied an! Bisher wurden die Daten einer Quote-Komponente folgendermaßen ausgegeben:

Mit dem expliziten JSON-Format sind Slots und Props nun klar getrennt:

Diese explizite Trennung ermöglicht es dem Frontend, native Vue-Slots zu nutzen. Anstelle von Vue-Komponeten mit spezieller Syntax, können die Komponenten nun direkt den Slot-Mechanismus von Vue verwenden:

Die standardmäßig mit nuxtjs-drupal-ce 2.5 ausgelieferten Vue-Komponenten wurden optimiert, um die Vorteile dieser expliziten JSON-Ausgabe voll auszuschöpfen, was zu einer saubereren Slot-Handhabung und insgesamt einfacherem Komponenten-Code führt. Natürlich haben wir auch die Dokumentation aktualisiert.

Verbesserte Views-Unterstützung

Die Drupal Views-Integration war schon immer eines der leistungsstarken Features von Lupus Decoupled. Mit diesem Release haben wir die Nutzung noch einfacher gemacht: Es können nun Row-Wrapper definiert und Custom-Element-Namen für die Views-Ausgabe angepasst werden. Außerdem wurden Warnungen hinzugefügt, falls Views Custom-Element-Display-Plugins ohne aktiviertes Custom-Elements-Style-Plugin verwendet werden, und die Views-Integration enthält nun eine JSON-Vorschau als Teil der Views-Vorschau, was die Inspektion der API-Ausgabe direkt beim Erstellen erleichtert.

Drupal Canvas-Ready

Die vielleicht zukunftsweisendste Neuerung in diesem Release ist die Unterstützung für Drupal Canvas 1.0, dank des Component-Preview-Systems. Durch die Integration mit dem Canvas ExtJS-Modul können Canvas-Seiten vollständig decoupled gerendert werden, während die Component Previews beim Bearbeiten voll funktionsfähig sind.

Die Einrichtung ist dank nuxt-component-preview und der generierten component-index.json unkompliziert – diese wird automatisch basierend auf den TypeScript-Metadaten der Vue-Komponenten generiert. Nach der Registrierung der Komponenten können Redakteure wie gewohnt mit Canvas arbeiten, einschließlich vollständiger Component Previews in Drupal. Das finale Rendering der Website erfolgt mit Nuxt und bietet daher volle Server-Side-Rendering-Unterstützung – ein Muss für SEO. Die Canvas-Integration werden wir in einem kommenden Blogbeitrag ausführlicher behandeln, stay tuned!

Update auf 1.4

Um alle neuen Features nutzen zu können, sollte der gesamte Stack aktualisiert werden:

composer require drupal/lupus_decoupled:^1.4 drupal/custom_elements:^3.3

drush updatedb -y

Und auf der Frontend-Seite das Update auf nuxtjs-drupal-ce 2.5:

npm install nuxtjs-drupal-ce@^2.5

Das explizite JSON-Format ist opt-in, sodass bestehende Webseiten ohne Kompatibilitätsprobleme aktualisiert werden können. Nach dem Update auf nuxtjs-drupal-ce 2.5 unterstützt das Frontend das neue Format, das dann einfach über die Konfiguration im neuen Custom-Elements-Einstellungsbildschirm unter /admin/config/content/custom-elements aktiviert werden kann.

Verbesserte Codespaces-Demos

Wir haben außerdem das lupus-decoupled-project-Template mit verbessertem GitHub Codespaces- und Devcontainer-Setup aktualisiert. Seit Gitpod im April eingestellt wurde, war das schnelle Ausprobieren von Lupus Decoupled nicht mehr so reibungslos wie gewünscht. Nun funktioniert es wieder besser: Mit den aktualisierten Frontend-Beispielen und der Devcontainer-Konfiguration ist das Start einer vollständigen Demo-Umgebung wieder im Nu erledigt. Dass ganze kann man einfach ausprobieren unter lupus-decoupled.org!

Wir konzentrieren uns nun darauf, die Integration von Drupal Canvas und Drupal CMS 2.0 zu optimieren und die Kombination von Drupals neuem visuellen Page Builder mit modernen Frontend-Frameworks noch einfacher zu gestalten. Das Ziel bleibt dasselbe wie zu Beginn: Decoupled Drupal-Entwicklung so reibungslos und effizient wie möglich zu machen, ohne auf die Stärken zu verzichten, die Drupal mitbringt.

Interesse geweckt? Auf lupus-decoupled.org gibt es die Dokumentation sowie eine Online-Demo via GitHub Codespaces. Weitere Informationen finden sich auf der Lupus Decoupled-Projektseite auf drupal.org. Fragen oder Feedback? Gerne im #lupus-decoupled-Channel auf Drupal Slack.