Create 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 content components. For instance, in a blog post custom type you might have a Pull Quote slice, a Text Block slice, and an Image Gallery slice. Users can compose pages with slices while developers have control over the data structure and the code.

Create a slice

Inside your components/ directory, add a folder called slices/.

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.

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:

<template>
  <PrismicRichText :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”:

<template>
  <!-- 
    Add the SliceZone to your template, and pass the slice
    data and your slice components
  -->
  <SliceZone
    :slices="document.data.slices"
    :components="{
      text_slice: TextSlice,
    }"
  />
</template>

<script>
  // Import your slices
  import TextSlice from "./slices/TextSlice";

  export default {
    data() {
      return {
        TextSlice,
        document: null,
      };
    },
    methods: {
      getContent: async () => {
        this.document = await this.$prismic.client.getByUID(
          "page",
          "homepage",
        );
      },
    },
    created() {
      this.getContent();
    },
  };
</script>

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

Create an object in which each property’s name is a slice API ID and the value is the corresponding slice component. Pass this object to the <SliceZone> as a components prop.

Add more slices

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

• Create a slice in Prismic and define the data model.
• Create a slice component in Vue.
• Import the slice component to your page and add it to the components prop.