Slicemachine getSliceComponentProps Issue - Slicemachine 0.3.3

Developing with Prismic
1

Hello all,

I have a problem with the new "Slicemachine" version.
With the new function "getSliceComponentProps" I get the following error message.
However, if I set the "slice" back to the classic/options props, everything works wonderfully.
I have also attached two additional screenshots.
Does anyone else have this problem, or is this error already known?

With kind regards
Basti

01
013290×1570 292 KB

02
021928×1006 109 KB

2

Im getting the same issue, I also get a bunch of warnings regarding required props missing: Context, Index from each created slice. This is a newly created nuxt project with slicemachine/init.

3

I haven't seen this issue before. I'll ask the team about this and come back when i have more information.

5

Hello everyone.
We haven't been able to reproduce the issue.
@SebastianGebhardt can you provide us with more information about your project? What's probably happening is that you're using vue-slicezone which isn't compatible with getSliceComponentProps. Instead you need to use: @prismicio/vue

7

Hi @Pau but your documentation here: vue-slicezone Technical Reference - Prismic says to use vue-slicezone when also having @prismic/vue or @prismic/nuxt installed? If I remove vue-slicezone I now get the issue "Invalid prop: type check failed for prop "slices". Expected Array, got Undefined " but the slices prop has data and is defined.

8

You need to replace it with the slice zone from @prismicio/react

9

Not using react, Im using the @prismic/nuxt module.

Im sure all this works, but your documentation is all over the place and outdated. Another example I tried doing a fresh install and repo using npx @slicemachine/init

and following the docs here: Setup a Prismic in a Nuxt Project - Prismic and get the error "Error: Can't resolve 'vue-slicezone' in ..." as it cant find vue-slicezone as its not installed during @slicemachine/init. So this needs changed as you say we shouldnt be using vue-slicezone.

1 Like
11

Thanks for pointing this out, you are right. We'll update the documentation to reflect this update.

Here's the code that should go in the pages/slice-simulator.vue file

<template>
  <SliceSimulator v-slot="{ slices }" :state="state">
    <SliceZone :slices="slices" :components="components" />
  </SliceSimulator>
</template>

<script>
import { SliceSimulator } from '@prismicio/slice-simulator-vue'
import { components } from '~/slices'
import state from '~~/.slicemachine/libraries-state.json'
export default {
  components: {
    SliceSimulator
  },
  data () {
    return { state, components }
  }
}
</script>