VUE SDK - " Component "ContentPage" is not defined."

1 
App.vue
<template>

<br-page :configuration="configuration" :mapping="mapping">

<main>

<br-component component="main" />

</main>

</br-page>

</template>

<script setup lang="ts">

import axios from 'axios'

import Content from './components/Content.vue'

const configuration = {

path: `${window.location.pathname}${window.location.search}`,

endpoint: "https://developers.bloomreach.io/delivery/site/v1/channels/test-exe/pages"
httpClient: axios

}

const mapping = { Content }

</script>


Content.vue
 
<template>
  <div>
    <div>Test: {{ component.getName() }}</div>
  </div>
</template>
 
<script setup lang="ts">
import type { Component } from '@bloomreach/spa-sdk';
import { toRefs } from 'vue';
 
const props = defineProps<{ component: Component }>();
const { component } = toRefs(props);
</script>

and on the page, I only see => "
Component “ContentPage” is not defined."

What is the problem, what do I wrong

2

Hey @Przemek
the error message you see

Component “ContentPage” is not defined."

indicates that your brXM component name doesn’t match any Vue component definition.
In your case specifically, the brXM component name is “ContentPage” and in Vue the component definition in the mapping is Content.
So you can rename the component in either brXM or Vue to match one another or you can provide name aliases.
eg. see here spa-sdk/examples/vue/src/router/Index.vue at main · bloomreach/spa-sdk · GitHub

const mapping: BrMapping = {
  Banner: BrBanner,
  Content: BrContent,
  menu: BrMenu,
  'News List': BrNewsList,
  'Simple Content': BrContent,
};

HTH

1 Like
3

Thankt you so much. I started the tutorial, and not everything is clear yet