Skip to content

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:
packages/cms-base/components/public/cms/block/CmsBlockProductListing.vue

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

HINT 💡

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:
/components/public/some/name.vue
then component name is PublicSomeName.

You can repeat folder structure in name like:
/components/cms/Name.vue
/components/cms/CmsName.vue

These are the same components resolving as CmsName. 💡

Generic CMS components

Generic components are responsible for resolving each CMS element

Overwrite CMS blocks in Nuxt 3 APP has loaded