ShopwareEA

Appearance

Return to top
On this page

Internal Structure ​

The internal structure of Shopware Frontends is designed to provide flexibility, reusability and abstraction. Shopware Frontends is a framework that is build with JavaScript and TypeScript.

Some of its components are based on Vue.js and Nuxt.js. The framework is designed to be used mostly with Vue.js and Nuxt.js, but it is not limited to these technologies. You can use it with any other JavaScript framework or library.

This section deals with the different packages and their abstractions. It is sorted by reusability / abstraction level from high to low and shows the main dependencies of each component respectively.

api-client ​

This package depends on Typescript | @shopware-pwa/api-client

The API client provides a common interface to access the Shopware API. It can be used standalone in any JavaScript project.

types ​

This package depends on Typescript | @shopware-pwa/types

The types package contains TypeScript types for all Shopware objects and API endpoints.

helpers ​

This package depends on Typescript | @shopware-pwa/helpers-next

Helpers are functions that can be used for formatting, data manipulation and other stateless tasks within any JavaScript project. They are not tied to any other components.

composables ​

This package depends on TypescriptThis package depends on Vue.js 3 | @shopware-pwa/composables-next

The composables are a set of Vue.js composition functions that can be used in any Vue.js project. They provide state management, UI logic and data fetching and are the base for all guides in our building section.

nuxt3-module ​

This package depends on TypescriptThis package depends on Vue.js 3This package depends on Nuxt 3 | @shopware-pwa/nuxt3-module

The Nuxt 3 module allows you to set up a Nuxt 3 project with Shopware Frontends. It provides the composables and api-client packages.

If you want to use these packages with a different Vue.js framework, see the guide for using Shopware Frontends in a custom project or use the vue3-plugin.

cms-base ​

This package depends on TypescriptThis package depends on Vue.js 3This package depends on Nuxt 3This package depends on UnoCSS / Tailwind.css | @shopware-pwa/cms-base

The CMS base is a Nuxt module that provides an implementation of all CMS components in Shopware based on utility-classes using unocss/Tailwind.css syntax. It is useful for projects that want to use the CMS components but design their own layout.

Head to our Content Pages guide to learn more.

Templates & Examples ​

Our GitHub repository also contains reference implementations for different frameworks and use cases. You can find them in the templates and examples folders. These examples are not directly part of the framework, but can be useful for learning how to use Shopware Frontends.