Technical Overview

Laioutr lets non-developers build and manage their e-commerce frontend using a visual editor called Studio. The output of the Studio is a Nuxt application that can be hosted or run locally.

Project data

The Nuxt application is generated from a project configuration file called laioutrrc.json. This file is located in the root of the project and contains the configuration for the project. In the Studio, clicking on "Publish" will generate this file from the Studio's data, install required dependencies, build the application and deploy to your hosting provider.

All data your storefront application needs comes from this file. All other data comes from external systems which are connected through apps via the Orchestr API.

Apps

Apps are the building blocks of your project.

1. They are responsible for fetching data like products, categories, and other entities from external systems.
2. They integrate third-party systems like newsletters, accounts, etc.
3. They provide sections and blocks that can be configured in the Studio.
4. They let the Studio connect to external media libraries for selecting images and videos.

Each app can provide one or more of the above features. For example, the Shopify app provides product-data and more from Shopify, integrates with Shopify's account system and lets the Studio connect to Shopify's media library. The UI app provides sections and blocks that can be configured in the Studio and filled with data from the e.g. the Shopify app.

Apps are implemented as Nuxt modules and are published to the either the public npm registry or the private Laioutr npm registry.

All core Laioutr packages are published to the private registry.

Storefront Application

As mentioned above, a Laioutr project is a Nuxt application. Currently it runs on Nuxt 3 in combination with Laioutr's core Nuxt modules. On top of that, the installed apps add all the necessary ui components, logic and integrations to the storefront application.