shopware/frontends - cms-base ​

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.

Features ​

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

Setup ​

Install npm package:

# Using pnpm
pnpm add -D @shopware-pwa/cms-base

# Using yarn
yarn add --dev @shopware-pwa/cms-base

# Using npm
npm i @shopware-pwa/cms-base --save-dev

Then, register the module by editing nuxt.config.js or (.ts) file:

/* nuxt.config.ts */

export default defineNuxtConfig({
  /* ... */
+ modules: [/* ... */, "@shopware-pwa/cms-base"],
});

⚠️ <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.

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.

TypeScript support ​

All components are fully typed with TypeScript.

No additional packages needed to be installed.

Links ​

• 📘 Documentation

• 👥 Community (#shopware-frontends & #shopware-pwa channel)

Changelog ​

Full changelog for stable version is available here

Latest changes: 1.0.3 ​

Patch Changes ​

• #1089 db7c93f Thanks @mkucmus! - Upgrade eslint config to flat format + lint

• #1148 7c38102 Thanks @mkucmus! - - Change resizing mode of Shopware CDN from crop to cover mode for image of product within SwProductCart component

  • Make translation for tier pricing table consistent

• #1074 b688163 Thanks @mkucmus! - Removed optional chaining for translated properties

• Updated dependencies [b688163, b688163, db7c93f, b688163, 3bde5fe]:

  • @shopware-pwa/helpers-next@1.0.1
  • @shopware-pwa/composables-next@1.1.1
  • @shopware/api-client@1.0.2

Available components ​

CmsGenericBlock ​

source code

Renders a Block type structure

Example usage:

<script setup lang="ts">
import type { CmsSectionDefault } from "@shopware-pwa/composables-next";
import { getCmsLayoutConfiguration } from "@shopware-pwa/helpers-next";

const props = defineProps<{
  content: CmsSectionDefault;
}>();

const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
</script>

<template>
  <div class="cms-section-default" :class="cssClasses" :styles="layoutStyles">
    <CmsGenericBlock
      v-for="cmsBlock in content.blocks"
      class="overflow-auto"
      :key="cmsBlock.id"
      :content="cmsBlock"
    />
  </div>
</template>

CmsGenericElement ​

source code

Renders an Element type structure

Example usage:

<script setup lang="ts">
import type { CmsBlockGalleryBuybox } from "@shopware-pwa/composables-next";
import { useCmsBlock } from "#imports";

const props = defineProps<{
  content: CmsBlockGalleryBuybox;
}>();

const { getSlotContent } = useCmsBlock(props.content);
const rightContent = getSlotContent("right");
const leftContent = getSlotContent("left");
</script>

<template>
  <div
    class="lg:container mx-auto flex flex-col lg:flex-row gap-10 justify-center"
  >
    <div class="overflow-hidden basis-4/6">
      <CmsGenericElement :content="leftContent" />
    </div>
    <div class="basis-2/6">
      <CmsGenericElement :content="rightContent" />
    </div>
  </div>
</template>

CmsNoComponent ​

source code

CmsPage ​

source code

An entrypoint to render the whole CMS object

Example usage:

<script setup lang="ts">
import { useLandingSearch } from "#imports";
import type { Schemas } from "#shopware";

const props = defineProps<{
  navigationId: string;
}>();

const { search } = useLandingSearch();

const { data: landingResponse } = await useAsyncData(
  "cmsLanding" + props.navigationId,
  async () => {
    const landingPage = await search(props.navigationId, {
      withCmsAssociations: true,
    });
    return landingPage;
  },
);

if (typeof landingResponse?.value !== null) {
  const landingPage = landingResponse as Ref<Schemas["LandingPage"]>;
  useCmsHead(landingPage, { mainShopTitle: "Shopware Frontends Demo Store" });
}
</script>

<template>
  <LayoutBreadcrumbs />
  <CmsPage v-if="landingResponse?.cmsPage" :content="landingResponse.cmsPage" />
</template>

CmsBlockCategoryNavigation ​

source code

CmsBlockCenterText ​

source code

CmsBlockCrossSelling ​

source code

CmsBlockCustomForm ​

source code

CmsBlockDefault ​

source code

CmsBlockForm ​

source code

CmsBlockGalleryBuybox ​

source code

CmsBlockImage ​

source code

CmsBlockImageBubbleRow ​

source code

CmsBlockImageCover ​

source code

CmsBlockImageFourColumn ​

source code

CmsBlockImageGallery ​

source code

CmsBlockImageHighlightRow ​

source code

CmsBlockImageSimpleGrid ​

source code

CmsBlockImageSlider ​

source code

CmsBlockImageText ​

source code

CmsBlockImageTextBubble ​

source code

CmsBlockImageTextCover ​

source code

CmsBlockImageTextGallery ​

source code

CmsBlockImageTextRow ​

source code

CmsBlockImageThreeColumn ​

source code

CmsBlockImageThreeCover ​

source code

CmsBlockImageTwoColumn ​

source code

CmsBlockProductDescriptionReviews ​

source code

CmsBlockProductHeading ​

source code

CmsBlockProductListing ​

source code

CmsBlockProductSlider ​

source code

CmsBlockProductThreeColumn ​

source code

CmsBlockSidebarFilter ​

source code

CmsBlockText ​

source code

CmsBlockTextHero ​

source code

CmsBlockTextOnImage ​

source code

CmsBlockTextTeaser ​

source code

CmsBlockTextTeaserSection ​

source code

CmsBlockTextThreeColumn ​

source code

CmsBlockTextTwoColumn ​

source code

CmsBlockVimeoVideo ​

source code

CmsBlockYoutubeVideo ​

source code

CmsElementBuyBox ​

source code

CmsElementCategoryNavigation ​

source code

CmsElementCrossSelling ​

source code

CmsElementCustomForm ​

source code

CmsElementForm ​

source code

CmsElementImage ​

source code

CmsElementImageGallery ​

source code

CmsElementImageGallery3dPlaceholder ​

source code

CmsElementImageSlider ​

source code

CmsElementManufacturerLogo ​

source code

CmsElementProductBox ​

source code

CmsElementProductDescriptionReviews ​

source code

CmsElementProductListing ​

source code

CmsElementProductName ​

source code

CmsElementProductSlider ​

source code

CmsElementSidebarFilter ​

source code

CmsElementText ​

source code

CmsElementVimeoVideo ​

source code

CmsElementYoutubeVideo ​

source code

CmsSectionDefault ​

source code

Renders a generic block type

See the <CmsPage/> source code to see how it's used

CmsSectionSidebar ​

source code

Renders a generic block type

See the <CmsPage/> source code to see how it's used

ProductCardSkeleton ​

source code