Im Juni standen reichhaltigere Inhalte, neue Seitentypen und ein deutlich erweitertes Cockpit im Vordergrund. Laioutr UI unterstützt jetzt Video und Audio als vollwertige Medientypen, brachte den EU-Energielabel- und Produktbewertungs-Block auf die Produktdetailseite und ergänzte mit Standort-Finder, Glossar und Promotion-Banner gleich mehrere neue Sektionen. Frontend Core lernte referenzierte globale Sektionen zu rendern, Prop-Werte direkt aus Query-Ergebnissen zu lesen und SEO-Felder mit Live-Query-Daten zu befüllen. Im Cockpit (Studio) kamen ein MCP-Server für KI-Agenten, Bulk-Übersetzungen mit Wiederherstellungspunkt und Projekt-Snapshots hinzu.

Frontend Core v0.30.3 – v0.32.1

Highlights

• SEO-Felder mit Live-Query-Daten: Der SEO-Titel, die Beschreibung und das Robots-Tag einer Seitenvariante unterstützen jetzt {{queries.<id>.<path>}}-Platzhalter, die im serverseitig gerenderten Head gegen die geladenen Query-Daten aufgelöst werden — eine Seite kann so etwa den Produkttitel oder den Lagerstatus direkt in ihre SEO-Tags einbetten (siehe dazu auch die neuen Studio-Editor-Felder unter Cockpit unten).
• Referenzierte globale Sektionen im Seiten-Rendering: Eine globale Sektion, die auf mehreren Seiten wiederverwendet wird, wird beim Rendern in die Seite aufgelöst — ihre Queries werden in den Query-Satz der Seite übernommen und ihre Konfiguration zur Laufzeit durchgereicht. Eine geteilte Sektion rendert damit überall dort konsistent, wo sie referenziert wird.
• Query-gebundene Prop-Werte (RcPropValueEntityProperty): Ein einzelner Prop-Wert kann seinen Inhalt jetzt aus einer Eigenschaft eines Query-Ergebnisses lesen — etwa ein Medienfeld, das an das Produktbild einer Query gebunden ist. Der aufgelöste Wert wird über coerceFieldValue in den passenden Typ überführt: Eine an ein Medienfeld gebundene String-URL wird so automatisch zu einem Media-Objekt. String-Template- und query-gebundene Pfade laufen ab sofort über denselben resolveEntityPath-Helper.
• Installierte Apps im Reflect-Endpoint: Der Reflect-Endpoint stellt jetzt installedApps bereit — jede über registerLaioutrApp registrierte App (inklusive Frontend Core selbst) mit ihrer Version und ihrem Page-Wrapper. Das Cockpit nutzt diese Information, um Funktionen freizuschalten, die eine bestimmte Framework- oder App-Version voraussetzen.
• Link-Resolver als Filter-Hook: frontend-core:link-resolver:resolve ist jetzt ein Filter-Hook. Er läuft, nachdem ein Link aufgelöst wurde, mit dem aufgelösten Pfad als Ausgangswert und kann diesen für jeden Link-Typ transformieren (etwa Query-Parameter anhängen) — auch über mehrere Handler hinweg. Bestehende Handler funktionieren unverändert weiter.
• CalendarDate-Wertetyp (Core Types): Ein ISO-YYYY-MM-DD-Datum ohne Uhrzeit und ohne Zeitzone, exportiert aus @laioutr-core/core-types/common — für ganztägige Werte wie das Eröffnungs- oder Wiedereröffnungsdatum eines Standorts.

Fehlerbehebungen & Verbesserungen

• Behoben: Handler-gesetzte Hook-Ergebnisse der frontend-core:link-resolver:*- und select-page-variant-Hooks wurden verworfen, weil der Wert gelesen wurde, bevor Nuxts verzögerte Handler liefen. Die Ergebnisse werden jetzt synchron gelesen und greifen zuverlässig.
• Behoben: Der Reflect-Endpoint (/api/laioutr/reflect) lieferte auf kalten Vercel-Serverless-Instanzen einen leeren Orchestr zurück. Er löst jetzt ein SSR-Rendering aus, sobald die Live-Reflexion leer ist.
• Unbekannte RcPropValue.type-Werte werden jetzt als „kein Wert" behandelt (mit deduplizierter console.warn), statt das rohe Wert-Objekt an nachgelagerte Renderer weiterzugeben. Neuere Studio-Konfigurationen degradieren so kontrolliert auf älteren Frontend-Core-Deployments, statt abzustürzen.
• Behoben: Die neuen SEO-Platzhalter wurden gegen die live-reaktive Query-Map statt gegen einen stabilen Snapshot aufgelöst — das konnte serverseitig zu einem 500er auf datengebundenen Seiten führen, weil die Auflösung außerhalb von Nuxts asynchronem Kontext lief. SEO-Titel, -Beschreibung und -Robots lesen jetzt einen zur Setup-Zeit erstellten Snapshot; Sektionen selbst nutzen weiterhin die live Query-Map, sodass Filter/Sortierung/Pagination clientseitig weiterhin korrekt nachladen.

Laioutr UI v2.2.3 – v2.4.3

Highlights

• Video und Audio als Medientypen: <Media> ist jetzt ein Dispatcher — neben Bildern rendert die Komponente Video und Audio über native MediaVideo- und MediaAudio-Renderer. Ein neuer playback-Modus fasst die Attribut-Cluster zusammen: playback="background" ist ein dekorativer Loop per Schalter (autoplay, muted, loop, playsinline an, controls aus), interactive ist der native Player. <Media> bietet v-model:paused, damit Konsumenten ihr eigenes Pause-Steuerelement positionieren können (WCAG 2.2.2), und unterdrückt Autoplay bei prefers-reduced-motion: reduce. Die Banner- und Medien-Sektionen akzeptieren jetzt sowohl Bild- als auch Video-Assets. Für HLS/DASH oder einen eigenen Player lässt sich der eingebaute Renderer pro Medientyp überschreiben.
• EU-Energielabel auf der Produktdetailseite: Der neue BlockProductDetailEnergyLabel rendert das EU-Energieeffizienzlabel — ein Inline-Badge der Energieklasse, das das vollständige Label in einer Lightbox öffnet, plus optionalem Link zum Produktdatenblatt. Grundlage ist die neue kanonische Komponente ProductVariantEnergyLabel, die pro Variante angelegt ist (jedes EU-Label ist im EPREL-Register modell- bzw. GTIN-gebunden). Adapter befüllen die Komponente, wo die Variante ein Label trägt; ohne Daten rendert der Block nichts.
• Produktbewertung auf der Produktdetailseite: BlockProductDetailRating zeigt die durchschnittliche Sternebewertung, den Bewertungswert (x/maxRating) und die Anzahl der Bewertungen. Die Produktdetail-Query lädt dafür die ProductRating-Komponente.
• Standort-Finder und Standortseiten: SectionLocationFinder löst Standorte über die neue kanonische Location-Entität auf und rendert einen Finder mit Karte, konfigurierbarer Überschrift und Google-Maps-Map-ID — inklusive Slot für manuell kuratierte BlockLocationCard-Instanzen. SectionLocationDetail rendert die vollständige Standortseite mit Karte, Header, Bildergalerie, Info-Liste und Beschreibung. Neue Seitentypen /locations und /locations/:slug sind dabei.
• Glossar-Sektion: SectionGlossaryList rendert einen alphabetischen A–Z-Index aus Name- und Link-Einträgen, wahlweise aus einer angebundenen Datenquelle (jede App, die eine Glossary-Entität registriert) oder aus einer manuell gepflegten Liste. Die Überschrift fällt auf eine lokalisierte Vorgabe zurück, wenn sie leer bleibt.
• Promotion-Banner mit Countdown: PromotionBanner und die zugehörige SectionPromotionBanner bringen Überschriften, einen optionalen Countdown, einen Kopier-Button für Promo-Codes, einen CTA und Oberflächen-Presets (default, pale, bright, solid) oder frei wählbare Farben pro Slot. Dazu neu: die Countdown-Komponente und das useCountdown-Composable, deren Einheiten-Labels über Intl.NumberFormat automatisch lokalisiert und pluralfähig sind.
• Link-Ziel im Studio wählbar: Redakteure können für redaktionelle Links jetzt _self oder _blank wählen — über das neue linkTargetOptions-Feld an einer Reihe von Blöcken und Sektionen (u. a. BlockButton, BlockCategoryCard, Header-Logos, SectionBrandList, SectionTopBar). target- und rel-Props sind durch die Link-Komponenten durchgereicht. Bestehende Konfigurationen bleiben unverändert (_self).
• Lokalisierte Grundpreise: Der neue $unitPrice-Formatter rendert einen UnitPrice als lokalisierten Preis / Referenz-String (z. B. 13,99 € / 100 ml) und kombiniert dafür die bestehenden $money- und $measurement-Formatter.

Fehlerbehebungen & Verbesserungen

• Pagination gibt jetzt SEO-korrekte Sequenz-Semantik aus: rel="prev" / rel="next" nur an den Rändern, an denen die Zielseite tatsächlich existiert. Auf der ersten Seite rendert das Zurück-Steuerelement als <button> (ohne href), auf der letzten Seite das Weiter-Steuerelement — Crawler folgen so keinen toten Links.
• Behoben: Inset-Banner (BannerBasic, BannerShowcase, BannerIntegrated, BrandHero) verloren bei hohen Elementen ihre abgerundeten Ecken.
• Behoben: Mehrere Props wurden stillschweigend verworfen, weil sie nicht zur Ziel-API passten — u. a. das Icon in FeaturePillList, das Öffnen des Off-Canvas-Filters in FilterBar und variant-Überschriften in den Standort- und Öffnungsstatus-Komponenten.
• OpeningStatus-Komponenten und -Composables nutzen jetzt die gemeinsame now-Uhr.

Hinweise für Entwickler (Breaking Changes)

• BrandList → AlphabeticalIndex: BrandList wurde durch die generische AlphabeticalIndex-Komponente ersetzt (alphabetisch gruppierte Link-Liste mit Überschrift und optionalem Zähler pro Eintrag). Umstellung: aus #ui/components/AlphabeticalIndex/AlphabeticalIndex.vue importieren, den brands-Prop in items umbenennen und heading explizit übergeben.
• SectionBrandList: Das Schemafeld brandLinks heißt jetzt items, dazu kommt ein neues heading-Textfeld. Gespeicherte Konfigurationen mit dem alten Feldnamen migrieren nicht automatisch.
• PromotionBanner verschoben: PromotionBanner liegt jetzt in @laioutr-core/ui (Promo-Codes sind Commerce-Domäne). Der Import PromotionBanner/types aus ui-kit entfällt — stattdessen aus @laioutr-core/ui importieren.

Cockpit (Studio) Juni 2026

Highlights

• Studio-MCP-Server für KI-Agenten: Der Studio-MCP-Server lässt sich jetzt unter Organisation → API-Schlüssel einrichten, damit KI-Assistenten wie Claude Desktop oder Cursor sich direkt mit einem Projekt verbinden können. Beim Verbinden erhalten Agenten eine kurze Studio-Einführung und können bei Bedarf die Datenmodell-Referenz nachladen; jedes zugängliche Projekt erscheint als eigener Katalog-Eintrag, und Mutations-Ergebnisse melden die jeweilige Katalog-Version. Über den MCP-Server können Agenten inzwischen: eine bestehende globale Sektion auf eine Seite platzieren, eine Sektion zwischen Header, Body und Footer oder auf eine andere Seite verschieben, einen Block zwischen lokalen Sektionen verschieben, Einträge zu Listen-Props hinzufügen (Slides, Cards, Rows), die wiederverwendbaren globalen Sektionen eines Projekts einsehen sowie den SEO-Titel und die Beschreibung einer Seite setzen und eine Seiten-Variante umbenennen.
• Bulk-Übersetzungen: Über die Translations-Seite lässt sich jetzt eine Übersetzungs-JSON importieren, um Textübersetzungen in großem Umfang zu aktualisieren. Vor jedem Import wird automatisch ein Wiederherstellungspunkt gespeichert, damit sich ein fehlerhafter Import zurücknehmen lässt. Der Export deckt nur noch übersetzbare Felder ab und setzt ein veröffentlichtes Frontend voraus. Übersetzungen für mehrere Sprachen lassen sich jetzt zudem in einer einzigen Bearbeitung schreiben.
• SEO-Felder mit Live-Daten befüllen: Der SEO-Titel und die Beschreibung einer Seite lassen sich jetzt mit Live-Query-Daten als Inline-Variablen befüllen (etwa ein Produkttitel), und das Robots-Tag kann aus einem Preset (Index/Noindex/Nofollow) gesetzt oder an Live-Query-Daten gebunden werden — serverseitig aufgelöst über die neuen Frontend-Core-Platzhalter (siehe oben). Die Einfüge-Buttons dafür sind nur aktiv, wenn das verbundene Frontend das unterstützt, andernfalls erscheint ein Upgrade-Hinweis.
• Projekt-Snapshots & Restore: Projektversionen lassen sich direkt im Studio als Snapshot sichern und wiederherstellen; vor jeder Migration wird automatisch ein Snapshot angelegt.

Fehlerbehebungen & Verbesserungen

• Behoben: Beim bloßen Öffnen eines Projekts zeigte Studio fälschlich einen ungespeicherten Zustand an.
• Behoben: Gelegentlicher „Statement Timeout"-Fehler beim Laden von Organisationen und Projekten.
• Behoben: Ein erneuter Versuch nach einem vorübergehenden Fehler wiederholte die Aktion jetzt tatsächlich, statt sie nur erneut abzuspielen.
• Behoben: Über MCP verbundene KI-Agenten konnten die Studio-Tools zeitweise nicht mehr auflisten; Tool- und Datenmodell-Beschreibungen spiegeln jetzt wieder korrekt, was der Server unterstützt.
• Behoben: Sektions- und Block-Umsortierungen wurden im MCP-Seitenbaum nicht abgebildet.
• Behoben: Medienfelder überstanden einen Übersetzungs-Export mit anschließendem Reimport nicht zuverlässig.
• Behoben: Der Import von Übersetzungen trennte Editoren gelegentlich von der Sitzung; Bilder werden jetzt korrekt importiert.
• Behoben: Beim Hinzufügen einer Sektion oder eines Blocks gesetzte Props gingen verloren, statt gespeichert zu werden.
• Behoben: Studio speichert jetzt keine defekte Seite mehr, wenn ein ungültiger Dropdown-Wert gesetzt wird — der Wert wird bereits beim Schreiben abgelehnt.

Hinweis für Entwickler (Breaking Change im MCP-Server)

• project_list listet jetzt die Locales jedes Projekts auf; die separate Locales-Ressource wurde entfernt. Das Setzen eines übersetzbaren Felds über den MCP-Server erfordert jetzt die Angabe der Locales; zusätzliche Locales an einem nicht übersetzbaren Feld werden mit einer Warnung ignoriert. Relevant für alle, die eigene Agenten-Integrationen gegen den Studio-MCP-Server gebaut haben.

Die vollständigen Changelogs mit allen technischen Details findest du unter docs.laioutr.io/getting-started/changelogs.

Weiterführende Ressourcen (Hub-Link-Audit)

Mehr dazu: Agentic Frontend Management Platform, Composable Visual Page Builder, Composable Digital Experience Platform.