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

| @shopware/api-client

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

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.

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.

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.

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.

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.