Onload page event with slice-machine

Developing with Prismic
1

Greetings,

I was wondering if there's a way, using NUXT + SLICE MACHINE, to set up an "onload" callback event when all the slices within the page have been loaded asynchronously.

Is there any way to achieve this?

Thank you very much.

3

Hello Macro,

Thanks for posting this question to us.

You need to create a resolver function with onload event. And pass this resolver function to slice-zone.

Here is a way to pass revolver function in the slice-zone:

<template>
  <slice-zone type="page" :resolver="resolver" :slices="page.data.body" />
</template>

Find more detail in the vue-slicezone article: https://npm.devtool.tech/vue-slicezone.

Let me know if you have further questions.

Thanks,
Priyanka

4

Hi Priyanka, thank you for your response.

I'm afraid what I'd need is slightly more complicated than that.

I dug more into the concept of it and the problems that I have are:

  1. I don't know how many slices are actually loaded into the page. The resolver works as a "forEach" to associate each slice with it's component but it doesn't tell me how many there are in total for this page.
  2. Each slice will then query the content to prismic, and the real onload event should be triggered once all the queries from all the slices are completed.

Therefore I don't think there's an easy solution for this I'm afraid?

In case there isn't, is there any way to know the list of all the slices that are going to be loaded into the slice-zone? So that at least I can check when all have been loaded through the resolver.

Thank you!

5

Hello @mb1

It will be easier to solve your issue if you provide a concrete example of what you want to achieve/avoid/fix.

To know how many slices to render:

  • page.data.body.length gives you the total number of slices renderer;
  • new Set(page.data.body.map(slice => slice.slice_type)) gives you all type of slices (components) that are about to be rendered.

I assume you are doing the query independently, like the example I suggested above. (not relying on the vue-slicezone ).

Let me know if you have any further questions.

Thanks,
Priyanka