Vendure Shop API + Laioutr: How the Frontend Connects

If you run Vendure and want a modern frontend without building one in React from scratch, the integration question is simple: how does the frontend layer talk to Vendure? This article walks through how Laioutr connects to the GraphQL Shop API and what stays where.

What the Shop API provides

The Vendure Shop API is a GraphQL API for customer-facing applications. It serves product and collection data, search, cart operations, customer accounts and the checkout flow. Vendure exposes a second API, the Admin API, for administration. Because the Shop API is a typed GraphQL contract, any frontend can consume it, including Laioutr.

Laioutr is the consumer, Vendure is the source of truth

Laioutr connects to the existing Shop API as a configured layer, not a custom integration project. Vendure remains the single source of truth: catalog, pricing, promotions, inventory, orders and any plugin logic stay in the backend. There is no data duplication and no sync layer to keep consistent. The frontend queries data when it renders and sends cart and checkout mutations back through the Shop API.

What this means in practice

• Product and collection pages render from live Shop API queries
• Cart and checkout actions are GraphQL mutations, so order logic stays in Vendure
• Customer accounts, addresses and order history come from the Shop API
• B2B specifics such as customer-specific pricing and approval flows, modeled in Vendure plugins, are served through the Shop API and rendered in Laioutr components

A configured layer, not a greenfield build

Vendure's Next.js storefront gives you a code starting point, but you still assemble and maintain the UI. Laioutr ships the commerce components and their GraphQL behaviors prebuilt, so the connect step is configuration against your Shop API schema. Marketing teams then compose pages and campaigns on top without touching the integration or the GraphQL layer.

Performance and hosting

Laioutr serves the frontend from an EU CDN with a Lighthouse 100 target and server-side rendering for SEO. Query-level caching at the frontend layer reduces load on the Vendure server for read-heavy catalog traffic.

FAQ

Do we keep our Vendure plugins?

Yes. Custom logic in your plugins is exposed through the Shop API and consumed by Laioutr components. The backend is untouched.

Does Laioutr store our product data?

No. Data stays in Vendure. Laioutr queries it at render time through the Shop API; there is no duplicate datastore to maintain.

Is the backend touched during setup?

No backend re-architecture is required. You use the GraphQL Shop API and configure the Laioutr connect layer. Talk to our team to scope your Vendure setup.

More on Laioutr: Personalization.

Related reading: SCAYLE Storefront API + Laioutr: How the Frontend Connects and SAP Commerce Cloud OCC API + Laioutr: How the Frontend Connects.