CraftPage

The CraftPage component maps section handles defined in Craft CMS to pages in Nuxt / Vue via the config prop. The content prop receives the actual data from your Craft CMS query, typically using useCraftQuery().

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({
    config: {
      type: Object as PropType<Config>,
      required: true,
    },
    content: {
      type: Object,
      required: true,
    },
  });
</script>

Props Explanation

• config: An object that maps Craft CMS section handles to Nuxt / Vue components. It should include:
  • pages: Defines the section handle and its corresponding Nuxt / Vue page component. Optionally, an Error component can be included.
  • components: Maps specific content blocks to Nuxt / Vue components based on field handles.
• content: The actual content data returned from a Craft CMS query, such as one created with useCraftQuery().

Error Handling

If you're using a catch-all route, you can add an Error page template to your config mapping. This ensures that any unmapped or erroneous sections gracefully display an error page, improving user experience and preventing unexpected behavior.