Group Templating with Vue.js

The Group field is used to create a repeatable (or also non-repeatable) collection of fields.

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.

Repeatable Group

Example 1

Here's an example of how to integrate a repeatable Group field into your template. First get the group which is an array, then loop through each item in the group as shown below.
In this example, the Group field has an API ID of references. The group contains two fields: a Link field with an API ID of link and a Key Text field with an API ID of link_text.

Copy
<template>
  <div>
    <ul>
      <li v-for="(item, index) in fields.references" :key="'reference-item-' + index">
        <prismic-link :field="item.link">
          {{ item.link_text }}
        </prismic-link>
      </li>
    </ul>
  </div>
</template>

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

Example 2

Here's another example that shows how to integrate a group of images (e.g. a photo gallery) from a repeatable Group field into your template.
In this example, the Group field has an API ID of photo_gallery. The group contains two fields: an Image field with an API ID of image and a Rich Text field with an API ID of caption.

Copy
<template>
  <div>
    <figure v-for="(item, index) in fields.photoGallery" :key="'photo-item-' + index">
      <prismic-image :field="item.image"/>
      <figcaption>
        {{ $prismic.richTextAsPlain(item.caption) }}
      </figcaption>
    </figure>
  </div>
</template>

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

Non-repeatable Group

Even if the group is non-repeatable, the Group field will be an array. You simply need to get the first (and only) group in the array and you can retrieve the fields in the group like any other. Here's an example showing how to integrate the fields of a non-repeatable Group into your template.
In this example, the Group field has an API ID of banner_group. The group consists of an Image field image, a Rich Text field description, a Link field link and a Rich Text field link_text.

Copy
<template>
  <div>
    <prismic-image :field="fields.bannerImage"/>
    <prismic-rich-text :field="fields.bannerDescription"/>
    <prismic-link :field="fields.bannerLink">
      {{ fields.bannerLinkText }}
    </prismic-link>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fields: {
        bannerImage: null,
        bannerDescription: null,
        bannerLink: null,
        bannerLinkText: null
      }
    };
  },
  methods: {
    getContent () {
      this.$prismic.client.getSingle('example')
        .then((document) => {
          const bannerGroup = document.data.banner_group[0];

          this.fields.bannerImage = bannerGroup.image;
          this.fields.bannerDescription = bannerGroup.description;
          this.fields.bannerLink = bannerGroup.link;
          this.fields.bannerLinkText = this.$prismic.richTextAsPlain(bannerGroup.link_text);
        })
    }
  },
  created () {
    this.getContent();
  }
};
</script>

To learn more about the Group field check out the user guide.