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.0 ​

Major Changes ​

• #871 1566f7a Thanks @patzick! - Read more about new major release: https://github.com/shopware/frontends/discussions/965

• #452 e2c225f Thanks @patzick! - Created Nuxt layer for composables and cms-base. This way overriding any part of that is now possible.

Minor Changes ​

• #524 6b54268 Thanks @BrocksiNet! - Moved cms internal helper functions:

  • buildUrlPrefix - moved to helpers package, see packages/helpers/src/cms/buildUrlPrefix.ts.
  • getCmsTranslations - move to composables as useCmsTranslations
  • getUrlPrefix - move to composables as method in useUrlResolver
  • resolveUrl - move to composables as method in useUrlResolver

• #517 f7797e8 Thanks @BrocksiNet! - Change tailwindcss colors definition. Allows easy overwrite in demo-store template.

• #1067 da77b65 Thanks @mdanilowicz! - Changed slider element to use a static value

• #794 ead7415 Thanks @mdanilowicz! - Add media 3D models support

Patch Changes ​

• #478 df96fd0 Thanks @patzick! - Dependency changes:

  • Changed dependency @nuxt/kit from ^3.8.1 to ^3.8.2
  • Changed dependency vue from ^3.3.8 to ^3.3.9

• #798 801420a Thanks @mdanilowicz! - Blocking double click on the wishlist button

• #897 033867b Thanks @mdanilowicz! - Make injected translations the most significant priority source

• #609 3c40741 Thanks @mkucmus! - Use setTimeout in SwSlider once component is mounted

• #1042 53e7177 Thanks @patzick! - Completely removed dependency to the deprecated @shopware-pwa/types package

• #805 815acda Thanks @BrocksiNet! - Remove ProductStatic and all related components, fix ReviewForm in demo-store

• #542 f8266a0 Thanks @patzick! - Potential problems with CmsElementText rendering, when Node object is incorrect

• #924 f6b194e Thanks @mdanilowicz! - Moved the svg 3d media placeholder to the vue component

• Updated dependencies [38a3853, 2343012, f1b2a30, 2ade07a, fc262dd, 1566f7a, 823aa9b, 4dce006, c729e70, bebae42, 782ef4d, 9643e56, 1583a7a, 97d2859, 864616f, d60d062, a92941e, 487d991, 013a1d6, 53e7177, 99ad5e9, c729e70, 04ac2ad, e2c225f, 89a97a4, c729e70, 864616f, 8f0b468, 97b5949, 05ca5b6, 7a3a92c, 6664aa2, 479357c, 6b54268, 6b54268]:

  • @shopware-pwa/composables-next@1.0.0
  • @shopware/api-client@1.0.0
  • @shopware-pwa/helpers-next@1.0.0

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