Frontend

Introduction

What ships with the Laioutr frontend. Capabilities and building blocks that come with the platform — from PWA and consent management to tracking and how to use or extend them.

Frontend Features

The Laioutr frontend is more than a Nuxt app: it ships with a set of features that give you installable apps, consent-aware analytics, and a consistent way to plug in third-party tools. This section describes what we provide out of the box and how you can use or extend it.

What we ship

When you build on @laioutr-core/frontend-core and the Laioutr frontend stack, you get:

  • Abstractions – Provider-agnostic APIs for consent and tracking. Your app and our apps (e.g. Cookiebot, GTM) use the same store and event shape; you can swap or add providers without rewriting business logic.
  • Ready-to-use apps – Optional modules (e.g. PWA, Cookiebot, GTM) that implement these abstractions so you can enable installability, cookie consent, and tag management with minimal configuration.
  • Extensibility – Clear extension points so you can add your own consent adapter, tracking adapter, or feature (e.g. another CMP or analytics backend) and have it work with the rest of the platform.

The features below are the main building blocks. Each has its own page with a short overview, configuration notes, and—where relevant—guidance for developers who want to implement their own variant or integrate a different tool.

Feature overview

PWA

Make your frontend installable and offline-capable. Zero-config defaults with optional customisation of manifest, icons, and caching.

Consent Management

One API for cookie and consent state. Plug in a consent adapter (e.g. Cookiebot) or build your own; other features use the same store to respect user choices.

Tracking

One API to send analytics and marketing events. Register tracking adapters (e.g. GTM), optionally gated by consent, or implement your own backend.

Page Types

Define the kinds of pages the frontend can have (Home, Product Detail, Landing Page, Search, custom). Add custom page types with routing, data, and Studio integration.

Media and Media Library

Let editors choose assets from connected backends (Shopify, Shopware, custom) in Cockpit. Implement your own media adapter so your asset system appears as a selectable library.

SSR and Caching

SSR is on by default. Learn how to make pages cacheable, set TTL and Cache-Control, cache API responses, and override behaviour in your own modules.

Multi-language Support

Let customers switch between multiple languages and regions on their frontend. Includes a language switcher component, a dark mode toggle, and optional informational links.

Currencies

Let customers switch between multiple currencies on their frontend. Includes a currency switcher component and optional informational links.

Authentification

Let customers authenticate on their frontend. Includes a login form, a register form, a recover password form, and a logout button.

Extending the frontend

As we add more features (e.g. theming, i18n, or additional integrations), they will be documented here with the same pattern: what the feature does, how to enable and configure it, and how to extend or replace it when you need a custom implementation. If you build your own adapter or app that fits one of these areas, follow the same abstractions so it works alongside the rest of the platform.