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 blogpost, you might have a PullQuote 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 to handle our Slices dynamically.

Setup

Install vue-slicezone:

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

Then, create a folder for your Slices. Inside your components/ directory, add a folder called slices/. (This step is a recommendation, but you can organize your Slice components however you like.)

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 the Slice to a document and enter some content.

Naming slices

The SliceZone matches snake_cased Slice names from the 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, your Slice components should have identical names, but each word should start with an uppercase letter, and there should be no space between the two words.

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. The resolver function takes a Slice's name and checks the Slices object for the relevant component. Then, the SliceZone renders that component.

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.