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.

shopware/frontends packages

Explore all Shopware Frontends packages on GitHub

api-client

| @shopware/api-client

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

API Client Reference

Package reference with all services

helpers

| @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.

Helpers Reference

Package reference with all helper methods

composables

| @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.

Composables Reference

Package API reference with all composables

nuxt3-module

| @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.

Nuxt3 Module Reference

Documentation about setup and basic usage

cms-base

| @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.

CMS Base Reference

Package API reference for the CMS composables

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.