Render Slices

In Prismic, Slices are sections of your webpage. On this page, you'll add a SliceZone component to your project, which will dynamically render Slice data as website sections.


In Prismic, Slices are data components. For instance, in a blog post, you might have a pull_quote Slice, which includes a Rich Text field for the quote, a Key Text field for the attribution, and a Color field to add some style.

Slices provide structured data for your Vue project. The SliceZone component collates Slice data from Prismic with Vue components to render your content dynamically. Editors can build complex page layouts without a developer.

We already gave a light overview of Slices in the Templating section of this guide. On this page, we will add a SliceZone component to handle our Slices dynamically.

Setup

Install vue-slicezone:

  • npm
  • Yarn
Copy
npm i vue-slicezone
Copy
yarn add vue-slicezone

Inside your components/ directory, add a folder called slices/. (This is how we recommend that you organize your slices, but you can do it differently.)

Create a Slice

In Prismic, navigate to the Custom Type that you're developing (for instance, "page" or "blog_post") and add a Slice. For simplicity, let's call it text_slice. This Slice will render a Rich Text field. Add a Rich Text field to the Slice, then save your Custom Type.

Create a new document, add the Slice, and enter some content.

Naming slices

The SliceZone matches snake_cased Slice names from the Prismic API with PascalCased Slice component names in your project. All of your Slices should have two-word names. In Prismic, the Slice name should be all-lowercase, with an underscore between the two words. In Vue, each word should start with an uppercase letter, and there should be no space between the two words.

For example, if the Slice is called "image_gallery" in Prismic, it should be called "ImageGallery.vue" in Vue.

Now, in your slices/ directory, create a Vue component called TextSlice.vue. In TextSlice.vue, your Slice data will be available as a prop called "slice." Here's how you might template it:

Copy
<template>
  <prismic-rich-text :field="slice.primary.rich_text_field" />
</template>

<script>
export default {
  name: 'TextSlice',
  props: {
    slice: Object
  }
}
</script>

Add the SliceZone to a page

Open the component where you would like to render your Slices. This should be the page where you make a query to Prismic and render one document. Here, we'll assume it's a document called "homepage":

Copy
<template>
  <!-- 
    Add the SliceZone to your template, and pass the Slice
    data and a resolver function as props.
  -->
  <SliceZone
    :slices="document.data.body"
    :resolver="({ sliceName }) => slices[sliceName]"
  />
</template>

<script>
// Import the SliceZone
import SliceZone from 'vue-slicezone'
// Import your Slices (ensure the path is correct)
import TextSlice from './slices/TextSlice'

export default {
  components: {
    SliceZone
  },
  data () {
    return {
      document: null,
      // Add your Slices to a "slices" object, which
      // will be used in the resolver function.
      slices: {
        TextSlice,
      }
    }
  },
  methods: {
    // Define a method to query Prismic for your document.
    getContent: async () => {
      this.document = await this.$prismic.client.getByUID('page', 'homepage')
    }
  },
  created () {
    // Call your query method when the component loads.
    this.getContent();
  }
}
</script>

Query Prismic for your document. Your document will have a body property, which contains all of the document's Slices. You pass this to the SliceZone as one prop.

The SliceZone takes another prop which is a "resolver function." This function collects all of your Slice components and determines which one to render for a given Slice. This is why you create a "slices" object.

Add more Slices

The above example will only render your TextSlice. But, you can add many more Slices. To do so:

  1. Create a Slice in Prismic and define the data model.
  2. Create a Slice component in Vue with a template.
  3. Import the Slice component to your page and add it to the Slices object.

Next Steps

You're done! You page will now render Slices dynamically. On the next page, we talk about how to perform more advanced queries to the Prismic API.


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.