Slices Templating with Vue.js

The Slices allow content writers to create dynamic content for richer page layouts.

Before Reading

This page assumes that you have already included the prismic-vue plugin in your project or that you are using the Prismic Vue.js starter. Check out the Integrating with existing project page to learn how to get setup.

Example 1

In this simple example that shows how to add slices to your website, we have two slices: a description slice and a photo gallery slice. You can retrieve a Slice Zone from your document by accessing the data property containing it, named by default body.

Description slice

The description slice is simple and only contains one field, which is non-repeatable.

Primary

non-repeatable

- A Rich Text field with the API ID of "rich_text"

Items

repeatable

None

The photo_gallery slice contains both a repeatable and non-repeatable field.

Primary

non-repeatable

- A Title field with the API ID of "title"

Items

repeatable

- An Image field with the API ID of "image"

Integration

Here's an example of how to integrate these Slices into your template.
In this example, the Slice Zone has the API ID of body.

Copy
<template>
  <div>
    <section v-for="(slice, index) in slices" :key="'slice-' + index">
      <template v-if="slice.slice_type === 'description'">
        <prismic-rich-text :field="slice.primary.rich_text"/>
      </template>
      <template v-else-if="slice.slice_type === 'photo_gallery'">
        <prismic-rich-text :field="slice.primary.title"/>
        <template v-for="(item, index) in slice.items">
          <prismic-image :field="item.image" :key="'photo-item-' + index"/>
        </template>
      </template>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      slices: []
    };
  },
  methods: {
    // This is an example query, the important part is above.
    getContent () {
      this.$prismic.client.getSingle('example')
        .then((document) => {
          this.slices = document.data.body;
        })
    }
  },
  created () {
    this.getContent();
  }
};
</script>

Example 2

The following is a more advanced example that shows how to use Slices for a landing page. In this example there are three slices: FAQ, featured items and long text.

FAQ slice

The faq slice takes advantage of both the repeatable and non-repeatable fields.

Primary

non-repeatable

- A Title field with the API ID of "title"

Items

repeatable

- A Title field with the API ID of "question"

- A Rich Text field with the API ID of "answer"

The featured_items slice contains a repeatable set of an image, title and summary fields.

Primary

non-repeatable

None

Items

repeatable

- An Image field with the API ID of "image"

- A Rich Text field with the API ID of "heading"

- A Rich Text field with the API ID of "summary"

Long text slice

The long_text slice contains only a Rich Text field, which is non-repeatable.

Primary

non-repeatable

- A Rich Text field with the API ID of "long_text"

Items

repeatable

None

Integration

Here's an example of how to integrate this Slice Zone into your template.
In this example, the Slice Zone has the API ID of body.

Copy
<template>
  <div>
    <section v-for="(slice, index) in slices" :key="'slice-' + index">
      <template v-if="slice.slice_type === 'faq'" class="slice-faq">
        <prismic-rich-text :field="slice.primary.title"/>
        <div v-for="(item, index) in slice.items" :key="'faq-item-' + index">
          <prismic-rich-text :field="item.question"/>
          <prismic-rich-text :field="item.answer"/>
        </div>
      </template>
      <template v-else-if="slice.slice_type === 'featured_items'" class="slice-featured-items">
        <div v-for="(item, index) in slice.items" :key="'featured-item-' + index">
          <prismic-image :field="item.image"/>
          <p>
            {{ $prismic.richTextAsPlain(item.heading) }}
          </p>
          <prismic-rich-text :field="item.summary"/>
        </div>
      </template>
      <template v-else-if="slice.slice_type === 'long_text'" class="slice-long-text">
        <prismic-rich-text :field="slice.primary.long_text"/>
      </template>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      slices: []
    };
  },
  methods: {
    // This is an example query, the important part is above.
    getContent () {
      this.$prismic.client.getSingle('example')
        .then((document) => {
          this.slices = document.data.body;
        })
    }
  },
  created () {
    this.getContent();
  }
};
</script>

To learn more about the Slices check out the user guide.