CraftArea

The CraftArea component maps field handles defined in Craft CMS to components in Nuxt / Vue defined in the config prop of the CraftPage. The content prop receives the actual data from your Craft CMS query, typically an array of Matrix Field data.

<script setup lang="ts">
  const contentBuilder = [
    {
      type: 'headline',
      someField: 'Example Headline',
    },
    {
      type: 'richText',
      someField: 'Example Rich Text',
    },
  ]
</script>

<template>
  <div>
    <CraftArea :content="contentBuilder" />
  </div>
</template>

content

This prop accepts an array of objects. Each Object should contain a key named type. The type represents the entry type of the entry in the matrix field. This value is used to find the correct Vue component based on the contentMapping defined in the CraftPage.