docs
  1. Developer Guide
  2. Getting Started
  3. What Is Storefront?

What is Storefront?

About Storefront

SCAYLE Storefront application is an all-in-one starter kit for building high-performance e-commerce shops for the SCAYLE Commerce Engine. It makes it quick and easy to build a best-in-class shop frontend. The latest version of the Storefront application is based on Nuxt and Vue 3 and consists of two parts:

  • Storefront SDKs: the headless storefront that provides design-agnostic business logic, feature packages, composables, and several helpers and utilities to simplify the development of Nuxt-based e-commerce applications on top of the SCAYLE Commerce Engine
  • Storefront application: This is the complete starter Nuxt application, which includes the Storefront SDKs along with all the features and pages required for a modern e-commerce frontend.

The Storefront application is built to make it easy to change or extend the shop design. This approach drastically reduces the effort required to launch a new e-commerce shop, as you only have to focus on customizing the UI and design layer to your specific needs.

Benefits

  • Progressive Technology: SCAYLEs Storefront relies on modern technologies to deliver a best-in-class user experience & fast performance
  • Fully featured: out of the box, the Storefront application provides:
  • Reusability/Scaling: Modular features that you can easily integrate and reuse.
  • Easy Configuration: Configuration is done via .env files.
  • Well-tested: The Storefront SDKs and Storefront application are proven in production, serving most SCAYLE clients, and are backed by comprehensive unit and end-to-end test coverage.
  • Customization: Our flexible UI and design options empower you to create a shop frontend tailored to your vision.

Architecture

SCAYLE provides a modular package architecture for its storefront solution. This approach enables tenants to upgrade or customize specific features without disrupting their entire application. Instead of requiring a complete overhaul with each major update, functionality is divided into independent, manageable packages.

Key Benefits:

  • Flexibility & Scalability – Developers can selectively update or modify features without impacting other application parts.
  • Easier Upgrades – Projects with limited resources can adopt changes at their own pace.

Each feature’s core logic is now extracted into dedicated packages, while the user interface components (Vue components) remain within the Storefront application to ensure consistency in design. This separation allows for efficient feature delivery while minimizing complexity and dependencies.

At the heart of this new architecture is @scayle/storefront-nuxt, which acts as the central hub connecting all independent feature packages. This ensures seamless integration and communication across different functionalities.

As part of this transition, existing feature-specific functions within the current system will be phased out and migrated to their corresponding feature packages, making the platform more maintainable and future-proof.

Storefront SDK (Storefront Core) solution overview.

1. Storefront SDKs

The Storefront SDKs are a headless solution. They are an NPM package registered as a module inside a Nuxt application. The SDK provides additional functionality but does not include any UI code; that is the responsibility of the Storefront application.

Storefront SDKs also simplify the development of Nuxt-based e-commerce applications on top of the SCAYLE Commerce Engine. They provide essential e-commerce building blocks, including product management, shopping cart handling, and user authentication.

The package includes:

  • API Layer: An auto-generated API and RPC methods for interacting with the SCAYLE engine. This is used internally by the composables.
  • Composables: Methods for interacting with data like products, categories, etc.
  • Utilities: Functions for managing and interacting with shop data like product attributes.
  • Features: Packages encapsulate the essential logic of a specific feature, allowing for independent upgrades or customization without affecting other parts of the application
Components of Storefront SDKs

Designed for seamless integration with Vue and Nuxt, the SDKs offer sensible defaults and best practices, reducing implementation effort. They also streamline data flow by connecting to the SCAYLE Backend through designated APIs.

Additionally, the SDKs consolidate interactions with SCAYLE APIs into ergonomic composable functions while providing caching, redirects, sessions, and authentication modules.

2. Storefront application

The Storefront application provides a ready-to-use starter kit built on the popular Nuxt framework. It comes pre-integrated with the Storefront SDKs and demonstrates the implementation of standard e-commerce features and pages, giving developers a significant head start. Beyond just a starting point, the Storefront application showcases best practices for integrating and utilizing various features, serving as a valuable reference point for guidance and inspiration.

Browser Support

Since the Storefront application is built using the Nuxt framework, we follow the same guidelines defined by Nuxt for browser support:

  • Nuxt 3 officially supports evergreen browsers only.
  • The core browser set targets the two most recent major versions of Chrome, Firefox, and Edge on a monthly basis and Safari on a yearly basis.

Further Education - SCAYLE Academy

Previous
Getting Started
Next up
Setup your Storefront
Provide Feedback