CraftPage

The CraftPage component renders the mapped Vue view based on your queried data and the config.pages prop.

<script setup lang="ts">
  import { CraftPage, type ContentMapping } from '@query-api/vue';
  import Home from './views/home.vue';
  import Headline from './components/headline.vue';

  const mapping: ContentMapping = {
    pages: {
      home: Home,
    },
    components: {
      headline: Headline,
    },
  };
  const data = { sectionHandle: "home", metadata: { entryType: "default" } }
</script>

<template>
  <CraftPage :config="mapping" :content="data" />
</template>

config

The config option lets you connect your Craft CMS sections and entry types to Vue components.

In pages, use sectionHandle:entryTypeHandle (e.g., news:home) to map to a Vue page. If the entry type handle is the same as the section handle, or if it's the default entry type for that section, you can simply use the section handle as the key (e.g., home).

In components, map entry types to Vue components. This is useful for things like matrix blocks. This is used in the CraftArea component later on. If you prefer to define the component mapping directly when using the CraftArea component you can do that as well.

• Type: object
• Default: { pages: {}, components: {} }
• Example:

contentMapping: {
  pages: {
    home: Home, // Maps section home entry with entry type home to the Home component.
    'news:home': News, // Maps section news entry with entry type home to the News component.
  },
  components: {
    headline: Headline, // Entry type headline will be rendered with the Headline component.
    imageText: CraftNotImplemented,
  },
}

Error Pages

You can also map error pages by providing special keys in the contentMapping.pages object. This allows you to render custom Next.js components for specific error scenarios.

• page404: For 404 Not Found errors.
• error: A general fallback for other errors.

content

The actual content data returned from a Craft CMS query, such as one created with useCraftEntry(). It should at least contain the sectionHandle and entryType.