On this page

Repeater field

The repeater field stores an array of subfield values.

Repeater field


Here's an example of using the repeater field in a block:

# blocks/IconBoxes.vue

  <div class="grid grid-cols-3">
    <div v-for="{ icon, text } of iconBoxes">
      <PruviousIcon :icon="icon" />
      <p>{{ text }}</p>

<script lang="ts" setup>
import { iconSubfield, repeaterField, textAreaSubfield } from '#pruvious'

  iconBoxes: repeaterField({
    subfields: {
      icon: iconSubfield(),
      text: textAreaSubfield({ placeholder: 'Enter text' }),
    addLabel: 'Add icon box',

Here is another example of how to use it in a collection definition:

# collections/products.ts

import { defineCollection } from '#pruvious'

export default defineCollection({
  name: 'products',
  mode: 'multi',
  fields: {
    variations: {
      type: 'repeater',
      options: {
        subfields: {
          size: {
            type: 'button-group',
            options: {
              choices: {
                S: 'Small',
                M: 'Medium',
                L: 'Large',
          available: {
            type: 'switch',
            options: {},
        fieldLayout: ['size', 'available'],
        addLabel: 'Add variation',


You can specify the following options in the repeater field (required fields are marked with the symbol R):



The text label displayed on the button used to add a new repeater item. Defaults to 'Add item'.


The default field value ([] if not defined).


A brief descriptive text displayed in code comments and in a tooltip at the upper right corner of the field.


Defines the field layout in the repeater. The layout array accepts the following values:

  • string - The subfield name.

  • string[] - An array of subfield names that will be displayed in a row.

  • Record<string, FieldLayout[]> - A tabbed layout.

  • '<./components/CustomComponent.vue>' - A Vue component path relative to the project root.

If not specified, all displayable subfields will be shown vertically one after another.


The field label displayed in the UI. By default, it is automatically generated based on the property name assigned to the field. For example, productVariations becomes Product variations.


The maximum allowed number of repeater entries.


The minimum allowed number of repeater entries. Defaults to 0.


A stringified TypeScript type used for overriding the automatically generated field value type. This feature is only applicable when declaring the field in a collection.


Specifies that the field input is mandatory during creation, requiring at least one entry.

subfields R

An object of subfields that define the structure of each repeater entry.

Last updated on January 9, 2024 at 11:50