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">
  import { CraftArea, CraftNotImplemented } from '@query-api/vue'
  import Headline from './components/headline.vue'

  const contentBuilder = [
    {
      type: 'headline',
      someField: 'Example Headline',
    },
    {
      type: 'richText',
      someField: 'Example Rich Text',
    },
  ]

  // optional
  const blockMapping = {
    headline: Headline, // Entry type headline will be rendered with the Headline component.
    richText: CraftNotImplemented,
  }
</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.

block-mapping

This optional prop accepts an object that contains the type as the key and a Vue component that you want to render for the given type. You can also define this mapping where you include the CraftPage component.