shopware/frontends - cms-base

Nuxt layer that provides an implementation of all CMS components in Shopware based on utility-classes using atomic css syntax (UnoCss / Tailwind).

It is useful for projects that want to use the CMS components but design their own layout.

Features

• Vue components for Shopping Experiences CMS
• CMS sections, blocks and elements styled using Tailwind CSS classes
• 🚀 Empowered by @shopware/composables

Setup

Install npm package:

# ✨ Auto-detect
npx nypm install -D @shopware/cms-base-layer

# npm
npm install -D @shopware/cms-base-layer

# yarn
yarn add -D @shopware/cms-base-layer

# pnpm
pnpm install -D @shopware/cms-base-layer

# bun
bun install -D @shopware/cms-base-layer

# deno
deno install --dev @shopware/cms-base-layer

Then, register the Nuxt layer in nuxt.config.ts file:

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  extends: ["@shopware/composables/nuxt-layer", "@shopware/cms-base-layer"],
  shopware: {
    endpoint: "https://demo-frontends.shopware.store/store-api/",
    accessToken: "SWSCBHFSNTVMAWNZDNFKSHLAYW",
  },
  modules: ["@shopware/nuxt-module"],
  /**
   * Commented because of the StackBlitz error
   * Issue: https://github.com/shopware/frontends/issues/88
   */
  typescript: {
    // typeCheck: true,
    strict: true,
  },
  telemetry: false,
});

Basic usage

Since all CMS components are registered in your Nuxt application, you can now start using them in your template (no imports needed):

/* Vue component */

// response object can be a Product|Category|Landing Page response from Shopware 6 store-api containing a layout (cmsPage object) built using  Shopping Experiences
<template>
    <CmsPage v-if="response.cmsPage" :content="response.cmsPage"/>
</template>

You can use default styling by installing/importing Tailwind CSS stylesheet in your project.

See a short guide how to use cms-base package in your project based on Nuxt v3.

Default styling

The components are styled using Tailwind CSS utility classes, so you can use them in your project without any additional configuration if your project uses Tailwind CSS.

This layer provides a default Tailwind CSS configuration (see uno.config.ts for details), which is used to style the components. If you want to customize the styling, you can do so by creating your own Tailwind CSS configuration file and extending the default one:

// nuxt.config.ts
export default defineNuxtConfig({
  // ...
  unocss: {
    nuxtLayers: true, // enable Nuxt layers for UnoCSS
  },
})

// uno.config.ts
import config from './.nuxt/uno.config.mjs'

export default config

Thanks to this, you can use the default configuration provided by this layer, or extend/overwrite it with your own customizations in your end-project:

// uno.config.ts
import { mergeConfigs } from '@unocss/core'
import config from './.nuxt/uno.config.mjs'

export default mergeConfigs([config, {
  theme: {
    colors: {
      primary: '#ff3e00',
      secondary: '#1c1c1c',
    },
  },
}])

See the UnoCSS reference for more information on how to configure UnoCSS in Nuxt when work with layers.

📘 Available components

The list of available blocks and elements is here.

🔄 Overwriting components

The procedure is:

• find a component in component's list, using a Vue devtools or browsing the github repository
• take its name
• create a file with the same name and place it into ~/components dir in your nuxt project (or wherever according your nuxt config)

✅ Thanks to this, nuxt will take the component registered in your app instead of the one registered by this nuxt layer.

Internal components

❗Internal components are not a part of public API. Once overwritten you need to track the changes on your own.

There is also a possibility to override the internal components, shared between public blocks and elements, the ones starting with Sw prefix, like SwSlider.vue or SwProductCard.vue.

An example: some components use SwSharedPrice.vue to show prices with corresponding currency for products in many places like product card, product details page and so on. In order to change the way how the price is displayed consistently - create a one component with a name SwSharedPrice.vue and that's it. The new component will be used everywhere where is "imported" (autoimported actually).

⚠️ <RouterLink/> components used

Some components use RouterLink component internally, available in Vue Router. In order to parse CMS components correctly and avoid missing component warning, it's highly recommended to have Vue Router installed or Nuxt router enabled in your application.

TypeScript support

All components are fully typed with TypeScript.

No additional packages needed to be installed.

Links

• 📘 Documentation

• 👥 Community (#composable-frontends)

Changelog

Full changelog for stable version is available here

Latest changes: 0.0.0-canary-20250919074705

Major Changes

• #1944 c41a839 Thanks @mkucmus! - Updates the @shopware/cms-base-layer package with the following changes:

  • Adds support for the new SwQuantitySelect component
  • Updates the SwProductAddToCart component to use the new SwQuantitySelect component
  • Fixes the Status component to use the new state classes
  • Updates the uno.config.ts file to include default styling that can be used and extended in the end-project:

  Nuxt UnoCSS Configuration Example

  // nuxt.config.ts in your end-project
  {
    unocss: {
      nuxtLayers: true; // enable Nuxt layers support in order to merge UnoCSS configurations
    }
  }

  UnoCSS Configuration Example

  // uno.config.ts in your end-project
  import { mergeConfigs } from "@unocss/core";
  import baseConfig from "./.nuxt/uno.config.mjs";
  
  export default mergeConfigs(baseConfig, {
    // will be merged with the base config - all optional
    theme: {
      colors: {
        "brand-primary": "#ff3e00",
        "brand-secondary": "#ff6a00",
      },
    },
    safelist: ["states-success"],
    preflights: [
      {
        getCSS: () => `
          body {
              font-family: 'Inter', sans-serif;
              -moz-osx-font-smoothing: grayscale;
              -webkit-font-smoothing: antialiased;
          }
          `,
      },
    ],
  });

Minor Changes

• #1959 c77daa6 Thanks @patzick! - Updated default types to Shopware 6.7

Patch Changes

• #2008 3a1bca9 Thanks @mkucmus! - Added missing labels for SwQuantitySelect component.

• #1951 3f2379b Thanks @mkucmus! - Use proper paths for components configuration

• Updated dependencies [87771c3, e43d9b7, 2cbda25, 2cbda25, 7fe2ef9, c77daa6]:

  • @shopware/composables@0.0.0-canary-20250919074705
  • @shopware/helpers@0.0.0-canary-20250919074705
  • @shopware/api-client@0.0.0-canary-20250919074705