Skip to content

Overwrite CMS blocks in Nuxt 3 APP

Overwrite CMS blocks in Nuxt 3 APP

To override CMS blocks in the Nuxt 3 app, create a .vue file with the cms block name in the components directory. Because of auto importing, CMS component import will be overwritten by the new file path.

More about auto imports can be found here

Example how to overwrite the cms block product listing

We have this cms element component from cms-base package:

If we want to create our own product listing component in demo-store the correct place would be: templates/vue-demo-store/components/cms/block/CmsBlockProductListing.vue


You can only override components that start with Cms. For example, you cannot override SwProductCard (this is an internal component). If you want to have your own SwProductCard, you need to overwrite the Cms component that is using the SwProductCard and then replace it with your e.g. CustomProductCard.

Resolving folder structure

Nuxt is resolving names by folder structure, so if you have:
then component name is PublicSomeName.

You can repeat folder structure in name like:

These are the same components resolving as CmsName. 💡

Generic CMS components

Generic components are responsible for resolving each CMS element