Data out of the slice machine (outside the Slice Zone)

Developing with Prismic
1

Hello, I follow the steps of the slicemachine.dev at everything looks good but I reach a point that I don't how to work with it, there is a way how to get data as it shows the dev mode, there I can see with the variable data.title[0].text I can get the value but when I use in the template is not working, there is a way to get the data from the page of prismic without the need of the slice?
Thank you.

3

Hey @miguel,

Welcome to the community!

That’s a great question, I’ll be happy to help.

For any content that is outside the SliceZone of your docuemnt (i.e. the body), you will need to do a standard query to the document, in this case query by UID, then return that to the template and pass the title data into the rich-text helper. You can see how I’ve done this in the example below:

<template>
  <div>
    <prismic-rich-text v-if="doc.title" :field="doc.title" />
    <slice-zone
      type="page"
      :uid="$route.params.uid"
    />
  </div>
</template>

<script>
import SliceZone from 'vue-slicezone'

export default {
  components: {
    SliceZone
  },
  async asyncData({ $prismic, params, error }) {
    try{
      // Query to get page content
      const page = (await $prismic.api.getByUID('page', params.uid)).data

      // Returns data to be used in template
      return {
        doc: page,
      }
    } catch (e) {
      // Returns error page
      error({ statusCode: 404, message: 'Page not found' })
    }
  }
}
</script>

This is because the SliceZone can only return data to the template from the body of the document. Making 2 calls like this may seem like bad practice for performance, but luckily thanks to Nuxt’s static generation capabilities, this won’t be an issue to your final website performance.

In the future it would be nice to optimise the Slice Zone to recognise if the call to the document has already been made with the asyncData method, that way 2 calls will not be made. We’ll open an feature request on the Slice Zone for this.

What is your exact use case here for getting content outside of the Slice Zone? Is it something you can’t model with a Slice?

Thanks.

5

Thank you, that was very useful

1 Like