Component-based development with the Shopware Frontend s Framework
Welcome to my blog article, which focuses on the benefits of component-based development under Shopware 6 using the Shopware Frontend s framework. In today's digital world, an appealing and powerful online store is essential to strengthen customer loyalty and increase sales. In recent years, headless architecture has established itself as a promising solution for online stores that rely on the seamless integration of front and Backend. Shopware 6 is a modern e-commerce platform that makes it possible to operate the store in the headless architecture.

Headless Commerce
Headless commerce is an approach for e-commerce platforms in which the Backend (the database and the logic that processes the data) is separated from the Frontend (the user interface). This means that the management of products, orders and customers still takes place in a Backend, but the user interface can be displayed on any platform or device, e.g. on a website, mobile app or smart device. By separating Backend and Frontend, headless commerce offers more flexibility and scalability for the e-commerce sector, as different Frontend platforms can be used without having to rewrite Backend. This also allows developers to create customized and engaging user interfaces that are tailored to the exact needs of their target audience. Overall, headless commerce is an advanced approach to e-commerce platforms that helps businesses quickly adapt to the ever-changing demands of the market and provide a better user experience.
Shopware Frontends Framework
Shopware has published Shopware Frontend s, a framework for component-based development based on the headless commerce approach. The framework enables developers to quickly and easily create appealing store Frontends by using a variety of ready-made components. By using Shopware Frontends, developers can also take advantage of headless commerce by separating the Frontend from the Backend and thus increase the flexibility and scalability of their store. The framework is also fully responsive and offers seamless integration with the Shopware platform, making it a powerful and flexible solution for creating modern e-commerce stores. With Shopware Frontends, Shopware has created a forward-looking solution that meets the needs of businesses of all sizes.
The Shopware Frontends framework is based on a combination of modern web technologies, including Nuxt.js, Vue.js, Typescript and Tailwind.
Vue.js
Vue.js is an advanced JavaScript library based on a component-based approach. It is very flexible and easy to learn and offers reactive data binding and a powerful routing option. Vue.js uses Virtual DOM to process changes to the user interface quickly and efficiently. The library includes many useful features such as event bindings, directives and components to easily create complex user interfaces. It also supports the creation of single-file components that combine HTML, CSS and JavaScript in one file. There are also a variety of plugins and extensions provided by the large Vue community to make development even easier and more efficient.
<script setup lang="ts">
export interface Props {
type?: 'circle' | 'square' | 'chip';
}
withDefaults(defineProps<Props>(), {
type: 'square',
});
const classList = {
circle: 'w-6 h-6 rounded-full',
square: 'px-2 h-[19px]',
chip: 'px-4 h-6 rounded-full',
};
</script>
<template>
<div :class="['bg-primary text-secondary inline-flex items-center justify-center', `${classList[type]}`]">
<div class="text-2sm leading-500 font-bold uppercase tracking-wider">
<slot />
</div>
</div>
</template>
Nuxt.js
Nuxt is a framework based on Vue.js that facilitates the creation of server-side rendered single-page applications. With Nuxt, developers can improve the performance of their application by reducing the loading time. This is achieved by preloading resources, resulting in a better user experience. In addition, Nuxt also facilitates the development of SEO-friendly applications, as it pre-renders the page content in the HTML structure and can therefore be better indexed by search engines.
import svgLoader from 'vite-svg-loader';
export default defineNuxtConfig({
build: {
transpile: ['floating-vue'],
},
shopware: {
shopwareEndpoint: process.env.shopwareEndpoint,
shopwareAccessToken: process.env.shopwareAccessToken,
},
alias: {
useMeta: '~/composables/useMeta',
},
typescript: {
typeCheck: true,
strict: true,
},
modules: ['@nuxtjs/tailwindcss', '@vueuse/nuxt', '@shopware-pwa/nuxt3-module', '@shopware-pwa/cms-base', 'nuxt-swiper'],
// components: true,
components: {
dirs: ['~/components', '~/styleguide'],
global: true,
},
vueuse: {
ssrHandlers: true,
},
experimental: {
inlineSSRStyles: false,
},
nitro: {
compressPublicAssets: true,
},
tailwindcss: {
configPath: 'tailwind.config.ts',
},
router: {
options: {
linkExactActiveClass: 'text-brand-primary',
},
},
vite: {
plugins: [svgLoader({})],
},
});
Typescript
TypeScript is an extension of JavaScript that provides static typing and other features to facilitate the development of large and complex applications. With TypeScript, developers can define types to avoid errors at runtime and increase code readability. TypeScript's static typing helps to detect errors early and improve code quality. TypeScript also offers other functions such as classes, interfaces, enumerations and generics to improve the structure and organization of code. It can be combined with many frameworks and libraries, including Vue.js. Overall, TypeScript is a powerful and useful extension of JavaScript that facilitates the development of scalable and robust applications.
{
"extends": "./.nuxt/tsconfig.json",
"include": [
"./.nuxt/nuxt.d.ts",
"./**/*"
],
}
Tailwind
Tailwind is a CSS framework based on a utility-first philosophy. It provides a large number of predefined CSS classes that can be applied to specific properties such as size, spacing, colors and fonts. With Tailwind, developers can quickly and easily apply CSS styles to their user interfaces without spending a lot of time creating custom CSS code. The framework also offers advanced features such as responsiveness, hover and focus effects, transitions and animations. Tailwind is also highly customizable and can be easily combined with other frameworks and libraries, including Vue.js. Overall, Tailwind is a useful CSS framework that saves developers time and allows them to create fast and appealing user interfaces.
<div class="bg-grey-medium text-primary typo-copy-md lg:typo-copy-lg flex items-center p-5">
<div
:class="`${classList[type]}`"
class="h-7.5 w-7.5 mr-3.5 flex flex-shrink-0 items-center justify-center rounded-full lg:mr-4 lg:h-11 lg:w-11"
>
<Icon
name="symbols:info--circle"
class="h-5 w-5 lg:h-7 lg:w-7"
/>
</div>
<slot />
</div>
How can the Shopware Frontend s Framework be used?
Two templates are available for setting up a Shopware Frontend s framework: A demo store template and a blank template.
The demo store template is an example template of the Shopware Frontend s framework, which is intended for developers to quickly and easily set up their own Shopware storeFrontend environment. It contains a variety of components that are used in a typical e-commerce environment, such as header, footer, navigation, category pages and product details. The template is responsive and contains many interactive elements such as search functions, shopping carts and payment and shipping options. It is also possible to customize and extend the template according to your own needs. The demo store template is a good starting point for the development of custom storeFrontends based on the Shopware Frontend s framework.
npx tiged shopware/frontends/templates/vue-demo-store demo-store
cd demo-store
npm i && npm run dev
The Blank Template is a minimal template for your own individual storeFrontend, which is built from scratch. In contrast to the demo store template, the blank template does not contain any ready-made layouts or styles and therefore offers a blank canvas for your own design. However, the template offers a basic folder structure and some configuration files to make it easier to get started. The Blank Template is particularly suitable for experienced developers who want to have full control over the look and feel of their Shopware Store-Frontend environment.
npx tiged shopware/frontends/templates/vue-blank vue-blank
cd vue-blank
npm i && npm run dev
At sitegeist, we use the demo store template as a starting point in the project, which is based on the Shopware Frontend s framework. The template provides a good basis and a quick start. It also offers the possibility to customize and extend the styles and layout according to our client's requirements. Using the demo store template as a base for the project allows us to save time and resources and focus on developing features and extensions that are specific to our client's needs.
As the project progressed, we developed customized components to adapt the functionality and design of theFrontendstore to our client's specific requirements. Component-based development offers several advantages. On the one hand, we were able to develop, test and reuse components independently of each other, which increased the efficiency of the development. Secondly, it allows us to combine and rearrange the components in different parts of the storeFrontendto create new pages and layouts quickly and easily. This allows us to increase the flexibility and maintainability of the code and reduce the development time for new functions and pages. Overall, the component-based development enabled us to develop a customized and flexible storeFrontend solution for our client that meets the client's specific requirements and needs.

The Shopware Frontend s framework offers five different Packages for connecting to the Shopware API, which are very helpful for the headless development of a store.
- @shopware-pwa/types
- @shopware-pwa/helpers-next
- @shopware-pwa/api-client
- @shopware-pwa/composables-next
- @shopware-pwa/cms-base
Types Package
The Shopware Frontend s framework provides a types package that provides typescript types for various Shopware objects. These include, for example, Order, Customer, Cart, Payment, Shipping or Address. The use of these preconfigured types facilitates the integration of the Shopware API into the Frontend development and enables the type-safe use of data from the Shopware API. The types package also provides types for requests and responses of the API endpoints, which ensures that the data is correctly formatted and validated. The use of typescript types in Shopware Frontend s framework helps to improve code quality and enables faster and safer development of Shopware-Frontends.
export type Cart = {
name: string;
token: string;
price: CartPrice;
lineItems: LineItem[];
errors: CartErrors;
deliveries: CartDelivery[];
transactions: Transaction[];
modified: boolean;
customerComment: null | string;
affiliateCode: null | string;
campaignCode: null | string;
};
Another advantage of the Types-Packages in the Shopware Frontend s Framework is that it is not limited to Vue.js and can be used independently of it in any Typescript project.
Helpers Package
In addition to the Types package, the Shopware Frontend s Framework also provides a Helpers package, which provides useful helper functions for the development of Shopware-Frontends. These functions include formatting, data manipulation and other stateless tasks that are common in Frontend development. The helper package uses the Types package to ensure type-safe use of Shopware data, but is independent of Vue.js and can be used in any Typescript project.
function getFormattedPrice(value, currency, options = {
direction: "ltr",
removeDecimals: false,
removeCurrency: false
}) {
let formattedPrice = [(+value).toFixed(toFixedValue), currency];
if (options.removeDecimals) {
formattedPrice[0] = removeDecimals(formattedPrice[0]);
}
if (options.removeCurrency) {
formattedPrice.pop();
}
if (options.direction === "rtl" && !options.removeCurrency) {
formattedPrice = formattedPrice.reverse();
}
return formattedPrice.join(" ");
}
API client package
The Shopware Frontend s framework also provides an API client package that abstracts access to the Shopware API and facilitates the development of Shopware-Frontends. The API client uses the Types package to enable type-safe use of the Shopware data. It can be used in any JavaScript project, regardless of whether it is a Vue.js application or another framework. The API client provides simple and efficient communication between the Shopware store and the Frontend by abstracting the details of the API endpoints and requests.
const getCustomerRegisterEndpoint = () => `/store-api/account/register`;
async function register(params, contextInstance = defaultInstance) {
const resp = await contextInstance.invoke.post(
getCustomerRegisterEndpoint(),
params
);
return resp.data;
}
Composables package
In addition, the Shopware Frontend s Framework also offers a Composables package, which is based on the API client and provides additional functionalities. Composables are reusable functions that simplify state management, UI login and data retrieval in Vue.js. The Composables package enables developers to use these functions easily and efficiently in their Vue.js projects. By using composables, developers can reduce the complexity of their applications and increase the reusability of their code. The Composables package therefore contributes to faster and more efficient development of Shopware-Frontends.
function useProduct(product, configurator) {
const _product = _useContext("product", { context: product });
if (!_product.value) {
throw new Error("Product context is not provided");
}
const _configurator = _useContext("configurator", {
context: product && configurator
});
function changeVariant(variant) {
_product.value = Object.assign({}, _product.value, variant);
}
return {
product: computed(() => _product.value),
configurator: computed(() => _configurator.value),
changeVariant
};
}
CMS Package
In addition to the API client package, the types package, the helper package and the composables package, the Shopware Frontend s framework also offers a CMS package. This package provides Vue.js components for the integration of CMS content in Shopware-Frontends. With the CMS package, developers can easily and efficiently integrate content such as text, images or videos from Shopware-CMS. The CMS package is therefore another useful tool for the development of Shopware-Frontends, which helps to increase efficiency.
<script setup lang="ts">
import type {
CmsElementImageSlider,
CmsElementImage,
} from "@shopware-pwa/composables-next";
import SwSlider from "../../../SwSlider.vue";
const props = defineProps<{
content: CmsElementImageSlider;
}>();
const items = computed(() => props.content.data.sliderItems);
</script>
<template>
<div class="cms-element-image-slider">
<SwSlider :config="props.content.config">
<CmsElementImage
v-for="image of items"
:key="image.media.url"
:content="({ data: image, config: props.content.config } as unknown as CmsElementImage)"
/>
</SwSlider>
</div>
</template>
Deployment and hosting
At Sitegeist, we deploy the Shopware Frontend s Vue application in our standardized Gitlab CI/CD pipeline in conjunction with the deployment tool Deployer. The pipeline allows us to perform automated builds and deploy the code to different environments such as test or production environments.
task('sms:build', function () {
set('release_path', '{{project_root}}');
run('npm ci');
run('npm run build');
})->local();
We currently host the Shopware Frontend s Vue.js application at Timme Hosting. To manage the application on the server and ensure that it always runs smoothly, we use Supervisor as a process manager. Supervisor is an open source tool that enables the monitoring and control of processes on Unix systems. With Supervisor we can start, stop and restart the application and also get valuable information about the availability and performance of the application. The combination of Timme Hosting and Supervisor allows us to run the Shopware Frontend s Vue.js application on a reliable and stable hosting service while automating and optimizing the maintenance and management of the application.
Conclusion
The Shopware Frontend s framework offers a robust and powerful platform for the component-based development of online stores. By using Vue.js and the various Packages packages provided by the framework, developers can quickly and easily create and customize custom components. The Types Package provides an easy way to integrate typing into the project, and the Composables Package makes it easy to manage state and integrate API calls into the application. With the CMS package, developers can also create and manage content quickly and easily.
The headless approach and the separation of Frontend and Backend make the development of online stores very flexible. If required, different teams can also be used for Frontend and Backend. The possibility of separation also offers the opportunity to establish special specialist teams for Backend or Frontend development and thus to advance the development of the store at a high speed and with high quality.
The Shopware Frontend s framework is currently still in the beta phase. Plugin support, especially for payment, is also currently still limited. However, it is already possible to integrate Paypal as a payment method.
Overall, the Shopware Frontend s Framework offers a comprehensive solution for the development of individual online stores and is a good choice for companies that require a flexible and powerful platform. We are excited about the further development of the framework and look forward to gaining our experience with it.
If you have any questions about our development or need support with your Shopware projects, we look forward to hearing from you.