Laioutr Release News - Juni 2026
June centered on richer content, new page types, and a substantially expanded Cockpit. Laioutr UI now supports video and audio as first-class media types, brought the EU energy label and product rating blocks to the product detail page, and added several new sections with a store locator, a glossary, and a promotion banner. Frontend Core learned to render referenced global sections, to read prop values directly from query results, and to populate SEO fields with live query data. Cockpit (Studio) gained an MCP server for AI agents, bulk translations with a restore point, and project snapshots.
Frontend Core v0.30.3 – v0.32.1
Highlights
- SEO fields with live query data: A page variant's SEO title, description, and robots tag now support
{{queries.<id>.<path>}}placeholders, resolved against loaded query data in the server-rendered head — a page can now embed live data such as a product title or stock status directly in its SEO tags (see the new Studio editor fields under Cockpit below). - Referenced global sections in page rendering: A global section reused across pages is now dereferenced into the page at render time — its queries are merged into the page's query set and its configuration is wired through. A shared section therefore renders consistently wherever it is referenced.
- Query-bound prop values (
RcPropValueEntityProperty): A single prop value can now read its content from a property of a query result — for example a media field bound to a query's product image. The resolved value is coerced into the right type viacoerceFieldValue, so a string URL bound to a media field automatically becomes aMediaobject. String-template and query-bound paths now share the sameresolveEntityPathhelper. - Installed apps in the reflect endpoint: The reflect endpoint now exposes
installedApps— every app registered viaregisterLaioutrApp(including Frontend Core itself), keyed by name with its version and page wrapper. The Cockpit uses this to gate features that require a specific framework or app version. - Link resolver as a filter hook:
frontend-core:link-resolver:resolveis now a filter hook. It runs after a link is resolved, pre-seeded with the resolved path, and can transform that value for any link type (for example appending query parameters) — threaded across multiple handlers. Existing handlers keep working unchanged. CalendarDatevalue type (Core Types): An ISOYYYY-MM-DDdate with no time and no timezone, exported from@laioutr-core/core-types/common— for whole-day values such as a location's opening or reopening date.
Bug Fixes & Improvements
- Fixed: Handler-set hook results for the
frontend-core:link-resolver:*andselect-page-varianthooks were dropped because the value was read before Nuxt's deferred handlers ran. Results are now read synchronously and take effect reliably. - Fixed: The reflect endpoint (
/api/laioutr/reflect) returned an empty orchestr on cold Vercel serverless instances. It now triggers an SSR render whenever the live reflection is empty. - Unknown
RcPropValue.typevalues are now treated as "no value" (with a deduplicatedconsole.warn) instead of leaking the raw value object to downstream renderers. Newer studio configurations degrade gracefully on older Frontend Core deployments rather than crashing. - Fixed: The new SEO placeholders were resolved against the live, route-reactive query map instead of a stable snapshot, which could cause a server-side 500 on data-bound pages because the resolution ran outside Nuxt's async context. SEO title, description, and robots now read a snapshot captured at setup time; sections themselves still use the live query map, so client-side filtering, sorting, and pagination keep re-fetching correctly.
Laioutr UI v2.2.3 – v2.4.3
Highlights
- Video and audio as media types:
<Media>is now a dispatcher — alongside images, it renders video and audio via nativeMediaVideoandMediaAudiorenderers. A newplaybackmode consolidates the attribute clusters:playback="background"is a one-switch decorative loop (autoplay, muted, loop, playsinline on, controls off), whileinteractiveis the native player.<Media>exposesv-model:pausedso consumers can position their own pause control (WCAG 2.2.2), and it suppresses autoplay underprefers-reduced-motion: reduce. Banner and media sections now accept both image and video assets. For HLS/DASH or a custom player, the built-in renderer can be overridden per media type. - EU energy label on the product detail page: The new
BlockProductDetailEnergyLabelrenders the EU energy efficiency label — an inline energy-class badge that opens the full label in a lightbox, plus an optional link to the product data sheet. It is backed by the newProductVariantEnergyLabelcanonical component, defined per variant (each EU label is registered in the EPREL registry against the model / GTIN). Adapters populate the component where a variant carries a label; without data, the block renders nothing. - Product rating on the product detail page:
BlockProductDetailRatingshows the average star rating, the rating value (x/maxRating), and the review count. The product detail query fetches theProductRatingcomponent for this. - Store locator and location pages:
SectionLocationFinderresolves locations via the new canonicalLocationentity and renders a finder with a map, a configurable heading, and a Google Maps Map ID — including a slot for manually curatedBlockLocationCardinstances.SectionLocationDetailrenders the full location page with map, header, image gallery, info list, and description. New page types/locationsand/locations/:slugship alongside. - Glossary section:
SectionGlossaryListrenders an alphabetical A–Z index of name and link entries, sourced either from a bound data source (any app registering aGlossaryentity) or from a manually authored list. The heading falls back to a localized default when left empty. - Promotion banner with countdown:
PromotionBannerand itsSectionPromotionBannerbring headings, an optional countdown, a copy button for promo codes, a CTA, and surface presets (default,pale,bright,solid) or freely chosen per-slot colors. New alongside them: theCountdowncomponent and theuseCountdowncomposable, whose unit labels are localized and plural-aware automatically viaIntl.NumberFormat. - Link target selectable in Studio: Editors can now choose
_selfor_blankfor editorial links via the newlinkTargetOptionsfield across a range of blocks and sections (includingBlockButton,BlockCategoryCard, header logos,SectionBrandList,SectionTopBar).targetandrelprops are plumbed through the link components. Existing configurations are unchanged (_self). - Localized unit prices: The new
$unitPriceformatter renders aUnitPriceas a localizedprice / referencestring (e.g.13.99 € / 100 ml), composing the existing$moneyand$measurementformatters.
Bug Fixes & Improvements
Paginationnow emits SEO-correct sequence semantics:rel="prev"/rel="next"only on the edges where the target page actually exists. On the first page the previous control renders as a<button>(nohref), and on the last page the next control does the same — so crawlers don't follow dead links.- Fixed: Inset banners (
BannerBasic,BannerShowcase,BannerIntegrated,BrandHero) lost their rounded corners on tall elements. - Fixed: Several props were silently dropped because they didn't match the target API — including the icon in
FeaturePillList, opening the off-canvas filter inFilterBar, andvariantheadings in the location and opening-status components. OpeningStatuscomponents and composables now use the sharednowclock.
Notes for Developers (Breaking Changes)
BrandList→AlphabeticalIndex:BrandListhas been replaced by the genericAlphabeticalIndexcomponent (an alphabetically grouped link list with a heading and an optional per-item count). Upgrade: import from#ui/components/AlphabeticalIndex/AlphabeticalIndex.vue, rename thebrandsprop toitems, and passheadingexplicitly.SectionBrandList: ThebrandLinksschema field is renamed toitems, with a newheadingtext field added. Stored configurations referencing the old field name will not migrate automatically.PromotionBannermoved:PromotionBannernow lives in@laioutr-core/ui(promo codes are commerce-domain). ThePromotionBanner/typesimport from ui-kit is gone — import from@laioutr-core/uiinstead.
Cockpit (Studio) June 2026
Highlights
- Studio MCP server for AI agents: The Studio MCP server can now be set up under Organization → API Keys, letting AI assistants such as Claude Desktop or Cursor connect directly to a project. On connecting, agents receive a short Studio primer and can fetch the deeper data-model reference on demand; every accessible project appears as its own catalog entry, and mutation results report the current catalog version. Through the MCP server, agents can now: place an existing global section onto a page, move or reorder a section between header, body, and footer or onto another page, move a block between local sections, add items to list props (slides, cards, rows), discover a project's reusable global sections, and set a page's SEO title and description or rename a page variant.
- Bulk translations: The Translations page now accepts a translations JSON import to bulk-update text translations. A restore point is saved automatically before each import, so a bad import can be undone. Export now covers only translatable fields and requires a published frontend. Translations for several languages can also be written in a single edit.
- Populate SEO fields with live data: A page's SEO title and description can now be populated with live query data as inline variables (such as a product title), and the robots tag can be set from a preset (index/noindex/nofollow) or bound to live query data — resolved server-side via the new Frontend Core placeholders described above. The corresponding insert buttons are enabled only when the connected frontend supports it; otherwise an upgrade hint is shown.
- Project snapshots & restore: Project versions can now be saved as a snapshot and restored directly from Studio; a snapshot is created automatically before each migration.
Bug Fixes & Improvements
- Fixed: Studio showed an unsaved state simply from opening a project.
- Fixed: An occasional "statement timeout" error when loading organizations and projects.
- Fixed: Retrying an action after a transient error now actually re-attempts it instead of replaying the same result.
- Fixed: AI agents connected over MCP could temporarily no longer list the Studio tools; tool and data-model descriptions now again accurately reflect what the server supports.
- Fixed: Section and block reordering was not reflected in the MCP page tree.
- Fixed: Media fields did not reliably survive a translations export followed by a re-import.
- Fixed: Importing translations occasionally disconnected editors; images now import correctly.
- Fixed: Props set when adding a section or block were lost instead of being saved.
- Fixed: Studio no longer saves a broken page when an invalid dropdown value is set — the value is now rejected at write time.
Notes for Developers (Breaking Change in the MCP Server)
project_listnow lists each project's locales; the separate locales resource has been removed. Setting a translatable field via the MCP server now requires specifying locales; extra locales on a non-translatable field are ignored with a warning. Relevant for anyone who has built custom agent integrations against the Studio MCP server.
Find the full changelogs with all technical details at docs.laioutr.io/getting-started/changelogs.
Related resources (Hub-Link-Audit)
Learn more: Agentic Frontend Management Platform, Composable Visual Page Builder, Composable Digital Experience Platform.