Customize SliceZone empty message?

[jmetros (Justin Metros)]

Our app is a Nuxt PWA with @nuxtjs/prismic, vue-slicezone and nuxt-sm deps.

When we create new pages or make some larger changes, we run into cache issues with our CDN sitting infront of Prismic. Sometimes stakeholders see this directly after a new build if we dont purge our cache:

Is there a way to beautify this message directly ( our kill it outright ) without forking and mucking with the component?

Or is there a best practice if the slice prop is empty, which I don't think we can know upfront ( when SSR ) because of async calls. For example:

<SliceZone type="some_page_that_doesnt_exist" query-type="single" error-component="MyErrorComponent"  />

Any help would be appreciated. Management does not like this SliceZone error. A simple little text or console error would be better than this because it looks like Prismic is the problem when it might not be. Of course we say, clear cache shift refresh yada yada, but something more on-brand is needed.

Thoughts?

[jake (Jake Walters)]

Hi Jmetros,

You could wrap the slice-zone inside a unique id/class and target the first element with css if classname is 'box'?

#slicesWrap > secton.box { display: none; }

[Fares]

Thanks, @jake, for proposing this workaround.

In fact, I don't know how to prevent this on the Prismic side, but if you think you have a solution, you can propose a PR on the Slice Machine Github repository, and we will review it.