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.

Available Props

The CraftPage component accepts the following props:

<script setup lang="ts">
  type Config = {
    pages:
      {
        [key: string]: Record<string, DefineComponent>;
        Error?: Record<string, DefineComponent>;
      };
    components: {
      [key: string]: Record<string, DefineComponent>;
    };
  };

  const props = defineProps({
    content: {
      type: Array,
      required: true,
    },
  });

  const config = inject<Config>('config');
</script>

Props Explanation

• config: An object that maps Craft CMS section handles to Nuxt / Vue components. It should include:
  • components: Maps specific content blocks to Nuxt / Vue components based on field handles.
• content: An array of matrix blocks.