@shopware-pwa/cms-base

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-pwa/composables-next

Setup

Install npm package:

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

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

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

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

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

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

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

⚠️ <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 (#composable-frontends & #shopware-pwa channel)

Changelog

Full changelog for stable version is available here

Latest changes: 1.1.2

Patch Changes

• Updated dependencies [938c4cf]:
  • @shopware/api-client@1.1.2
  • @shopware-pwa/composables-next@1.4.2