How to passing props from the parent's <slice-zone> down to be used in indidivual slices

[online (deming factor)]

When working with vue component I pretty much can do this:

parent:
<hero-solution :doc="doc" parent="/sector/retail" suite="RX" theme="#5654A7" />

child:
<h3 :style="{color: $attrs.theme}" class="pt-8">Example</h3>

But this does not work when I attempt to pass similar via ..

<slice-zone type="retail" :uid="$route.params.uid" :doc="doc" theme="#5654A7" />

The 'theme' prop just never becomes available, which I use the vue inspection tool, I can see the value against the SliceZone but it's not shown for any of the children.

Please give a fully realised example of how to pass dynamic values from the parent down to the child slices using <slice-zone>.

Thanks

[Priyanka (Priyanka Maheshwari)]

Hello @online,

Thanks for reaching out to us.

Currently, you can only pass prop theme to slices which are already defined in 'vue-slicezone'. If you want to pass your props to your custom slices, you need to create your own library for that.

Please check this example project create by my colleague, you can explore this but, you can not import these slice.

levimykel/sm-prismic-docs-library-react

Let me know if you have any other question.

Thanks,
Priyanka

[online (deming factor)]

Ok I'm pretty confused.

So I just want to pass a prop down via are you saying this is difficult to achieve?

Also I'm working in nuxt/vue so the example is not so easy to follow as Im less familiar with react. Do you have a nuxt example?

Simply I want to define a variable on the parent.. doesn't need to be called theme.. and then pass that down to be available to the slice children.

Can you please provide me with sample code of how I can do this (hopefully fairly easily). Seems like a pretty common use case.

Thanks

[Priyanka (Priyanka Maheshwari)]

I assumed you are using Slice-Machine, and my response was aligned with that. Can you please confirm that are you using slice-machine?

[online (deming factor)]

Wait. I think this is a huge concern if I'm interpreting it correctly.

So you folks are saying there is currently no simple way to pass our own custom props down from a page to the underlying slices??

This is core functionality within say nuxt components.
It means that slices become an inaccessible island.

To work around this I'm not going to have to add additional fields in the Prismic Writers Room to make up for this gap. Eg get the user to awkwardly "set variables" which should be fed into the slice as "paramaters".

I would have expected that passing down custom props via a predefined prop like "params" would be the sort of thing I'd need to do to make this work.

This is like programming without being able to set input paramaters.

Please review with the dev team. This is needs addressing as a fairly critical issue.

[hugo.villain]

Right, we'll provide a fix with custom parameters by the end of the week. Thanks for your input

[hugo.villain]

@online, I created a PR here: feat(vue-sm): handle custom props by hypervillain · Pull Request #67 · prismicio/slice-machine · GitHub and published an alpha version of the package. Can you try vue-slicezone@0.0.28-alpha.1

[digital3 (Roberto Muzzano)]

Hello, I can't get sliceProps object inside my component, same for the theme property.
I'm using vue-slicezone:0.1.6, I can only access to slice prop.
Can you help me to detect where I'm missing.

[Pau]

Hello @digital3 thanks for reaching out.

vue-slicezone is deprecated

This package has been deprecated and will no longer be maintained. The component has been migrated to @prismicio/vue.

Props in @prismicio/vue are used differently. Refer to the technical reference to learn more:

@prismicio/vue Technical Reference

[lateek35_naturo (Laetitia)]

Hi @Pau,

I'm a little surprised to learn that vue-slicezone is deprecated here. And so I'm kinda lost now.

I'm using nuxt (vue2) and tried to removed vue-slicezone from my package.json, updated @nuxtjs/prismic to the last version.
Should I remove nuxt-sm from nuxt.config modules also (and package.json) ?
I also tried to update the configuration as mentioned here : Installation - @nuxtjs/prismic

But now I just got ReferenceError: SliceZone is not defined

How should I process, I didn't find any migration guide from my side.

[Pau]

Hey @lateek35_naturo. It's true. We don’t currently have a migration guide for this kit. I'll add a note to our documentation backlog. Please check out our templating document to see how it's done with the <slice-zone> on @nuxtjs/prismic

Template Content with Nuxt.js

[digital3 (Roberto Muzzano)]

Hello Pau, I'm surprised too, why you don't clearly mention deprecation here?

vue-slicezone

[Pau]

That's a good catch. Thank you for pointing this out @digital3. I'll send it to the team so we can add a proper warning.

[digital3 (Roberto Muzzano)]

Hey, you don't added the deprecation information yet?

[Pau]

Hello @digital3, it seems like it. vue-slicezone was in the Slice Machine repository, but it was removed since it was replaced by @prismicio/vue ’s <SliceZone> component. You can open an issue requesting the addition of this deprecation note in the npm package. Maybe this will make the process quicker.

Issues · prismicio/slice-machine