Create content pages ​

In this chapter you will learn how to display content pages with data from Shopware's own CMS. It is based on the mechanism of routing and fetching page content described in the previous chapter. The case of building fully custom components from scratch will be covered as well. Specifically, you will learn how to

• Render a content page using the cms-base package
• Render a content page using custom components

Use the cms-base package ​

Using the cms-base package, you don't have to implement any CMS components by yourself. You can start with a working implementation but add and override single components as you need. It requires a couple dependencies for styling and validation purposes to work properly.

Install the package ​

Depending on which template you are using you need to install the package first.
See install the package.

Render the page ​

Now, you can import all components from the @shopware-pwa/cms-base package and use them in your templates. The most straightforward way to render a page is to use the CmsPage component. It takes a content prop and resolves all subordinate sections, blocks and elements automatically. Put the following code in your catch-all component that also handles the routing logic.

<CmsPage v-if="data" :content="data.value.cmsPage"/>

Customize components ​

The cms-base package has an opinionated style of components and is based on Tailwind.css. If you want to override components or add custom ones, you can build them right into your project or import them as a separate package.

Use custom components ​

If you use custom components and not the cms-base package, you have to ensure the correct rendering of the page. You also need to re-create all components that the Shopware CMS uses. For the creation of custom components - such as elements or blocks, you can follow the instructions given in Shopping Experiences and benefit from typehinting and the useCms* composables.