Introduction to Shopware Composable Frontends

Headless storefront architectures are increasingly popular due to their flexibility, performance, scalability, and enhanced security. In this competitive space, a traditional theme-based approach to customize the storefront may be limiting. So, to address this, Shopware responded with their own framework – Shopware Composable Frontends.

What are Shopware Composable Frontends?

Shopware Composable Frontends are a collection of multiple JavaScript packages that can be used in custom storefront implementations.

By default, they are written to support Shopware 6 API (both cloud and self-hosted). They can handle some of the most complicated functionalities, like routing, CMS integration, payments, cart logic, and authentication. They also don’t require a specific frontend framework (but Nuxt.js is definitely the most advertised option to choose) and can be used with any of them (also coming with TypeScript support).

Shopware Composable Frontends structure

Packages included in Shopware Composable Frontends can be divided into two groups:

• the universal ones, which can be used in any storefront architecture
• and the ones prepared specifically for the Nuxt.js framework.

Universal Packages

This set consists of the following:

API client

This package enables you to connect to Shopware API and handle requests.

Two main exposed methods are `createAdminAPIClient` for the admin panel scope and `createAPIClient` for storefront API one.

Using them is very easy, as shown on an example code below, which is used to fetch products:

```
import { createAPIClient } from "@shopware/api-client";

const apiClient = createAPIClient({
  baseURL: <shopware-api-endpoint>,
  accessToken: <shopware-api-endpoint-token>,
});

const response = await apiClient.invoke("readProduct post /product");
productsResponse.value = response.data;
const products = response.data.elements;
```

Helpers

The helpers package consists of various useful functions that facilitate development.

Each of them can be imported and used separately anywhere in the project.

Helpers include, but not limit to:

• `isProduct()`, `isCategory()`, and `isLandingPage()` check if the given object’s type is valid for the specified criteria
• `getProductReviews()` formats product reviews data
• `getTranslatedProperty()` and `getCmsTranslate()` can be used to translate both plain texts and specific properties of the object
• `getMedia()`, `getSrcSetForMedia()`, `getBiggestThumbnailUrl()`and `getSmallestThumbnailUrl()` help with image-related logic,
• `getProductName()`, `getProductUrl()` and `getProductRatingAverage()` can be used to simplify getting information about a specific product

Additionally, they also include reusable element class name lists used in the CMS.

Nuxt.js-specific packages

Packages prepared specifically for Nuxt.js are:

CMS Base

This package consists of CMS sections, blocks, and elements styled using Tailwind CSS classes provided in the form of Vue.js components.

The whole package is included in Nuxt.js configuration file, so all components are available globally.

They are the main building blocks of the storefront, as they satisfy a wide range of needs, from the layouts, sections, sidebars, and CMS blocks to images, forms, and text blocks.

Composables

They are a set of Vue.js composition functions that provide state management, UI logic, and data fetching.

They can be divided into two groups:

• Context Composables, which provide state-sharing functionalities.
  They are used to avoid passing data deep into the component tree and instead allow access to the needed information from any component.
  💡 For example, we can use `const { product } = useProduct(productResponse);` in the main component and the product object becomes available in all children components by just declaring it with `const { product } = useProduct();`
• Shared Composables, which are similar to Context Composables, but with one major difference – they don’t duplicate the data in the memory.
  `Cart` and `Listing` composables are prepared that way, as there is only one instance of them needed in the storefront.

An important note is that composables can be extended and overridden easily in the project by, as usual, creating a new file with the same name and path in the project.

Nuxt3-module

This module is a bundle of the two mentioned above, which allows you to quickly set up Nuxt.js project with Shopware Frontends.

Why use Shopware Composable Frontends?

Shopware Composable Frontends offer a highly flexible approach to building unique and scalable e-commerce experiences.

What’s more, unlike traditional monolithic systems, Shopware Composable Frontends break down the frontend into modular components, allowing merchants to select only the specific functionalities they need.

In addition, this modularity fosters agility, enabling teams to respond faster to market changes, implement new features independently, and update components without affecting the entire system.

To see Shopware Composable Frontends in action, you can visit frontends-demo.vercel.app for a live demo that showcases this modern approach.