Tech stack

This page explains what the frontend product needs to run and what it is built from: runtime requirements, the core framework and libraries, and the Laioutr packages that form the base of every frontend project.

What you need to run the frontend

To run a Laioutr frontend project you need:

After cloning or generating a frontend project, you typically run install, prepare (if the project has a prepare step for Nuxt and modules), and then dev or build. The exact scripts depend on the project template; see Getting started for your case.

What the frontend is built from

The frontend is a Nuxt 3 application that layers Laioutr core packages and optional apps on top of the framework.

Foundation: Nuxt 3 and Vue 3

• Nuxt 3 – The application framework. It provides server-side rendering (SSR), file-based routing, server routes, Nitro server, and the module system that wires in Laioutr and other packages.
• Vue 3 – The UI layer. Sections, blocks, and pages are Vue components; reactivity and composition API are used throughout.

So at the bottom of the stack you have: Node.js → Nuxt 3 → Vue 3.

Laioutr core packages (required)

Every Laioutr frontend includes these core packages. They are the minimum needed for the frontend to behave as a Laioutr storefront:

So the core stack is: Nuxt 3 + Vue 3 + frontend-core + orchestr + kit + core-types. A minimal frontend project has these plus a laioutrrc and (usually) at least one app that provides sections, blocks, and Orchestr handlers.

What frontend-core brings in

The @laioutr-core/frontend-core module depends on (among others):

• @nuxt/image – Image optimization and provider support (e.g. for canonical Media and app-specific image providers).
• @nuxtjs/i18n – Internationalisation (multi-language and locale switching).
• Pinia (and @pinia/nuxt) – Global state (e.g. consent store, tracking store, and other composables that need shared state).
• VueUse (@vueuse/core, @vueuse/nuxt, etc.) – Composables and utilities used in the frontend and in sections/blocks.
• Other utilities – e.g. defu, radash, fast-json-patch, reka-ui (headless UI primitives where used), and type helpers.

You don’t have to install these yourself for a standard Laioutr frontend; they come with frontend-core. If you build a custom app, your app can depend on frontend-core (or the kit) as a peer and rely on the same stack.

Optional: apps and extra modules

On top of the core stack, a project adds apps (Laioutr Nuxt modules) and optionally other Nuxt modules:

• Backend / e‑commerce apps – e.g. @laioutr-app/shopify, @laioutr-app/shopware, @laioutr-app/commercetools, @laioutr-app/adobe-commerce. They register Orchestr handlers (queries, links, actions, component resolvers), often provide a media library provider and Nuxt Image provider, and may add sections/blocks.
• Feature apps – e.g. @laioutr-app/pwa (installable app, offline), @laioutr-app/cookiebot (consent), @laioutr-app/gtm (tracking), @laioutr-app/nimstrata (search/recommendations). They implement or extend the frontend’s feature abstractions (consent adapter, tracking adapter, etc.).
• UI / content – Sections and blocks can come from a dedicated UI package (e.g. @laioutr-ui/... or app-provided sections/blocks) so the storefront has something to render from Studio config.

The exact list of apps is defined in the project’s laioutrrc.json and in the Nuxt config (e.g. modules: ['@laioutr-core/frontend-core', '@laioutr-app/shopify', ...]). So the full stack is: Node → Nuxt 3 → Vue 3 → Laioutr core → apps (and any extra Nuxt modules).

Summary

Together, this is what you need to run the frontend and what the frontend is built from. For setting up a project and running it locally, see Getting started.