Hi, I’ve been trying to register custom component on my account on a single page model. I’ve been followong this tutorial (Registering Custom Components - Builder.io) and also i have copied this github ( builder/examples/vue/nuxt-3-catchall/pages/[...app].vue at main · BuilderIO/builder · GitHub ) and created the same files and components as the nuxt3-catchall repository. But it does not doing anything, and i cannot see my custom component in the related builder editor page.
I’m with last @builder.io/sdk-vue (2.0.20).
This is what I have done :
Create a component in @/components/HelloWorld.vue
<template>
<div class="hello-world">
<div class="text">Hello {{ text }}!</div>
<slot></slot>
</div>
</template>
<script>
export default {
props: {
text: {
type: String,
default: 'world',
},
},
};
</script>
<style scoped>
.hello-world {
display: flex;
flex-direction: column;
}
.text {
padding: 50px;
}
</style>
Then in @pages/[..page].vue (with of course the right API KEY) :
<template>
<div id="home">
<div>Hello world from your Vue project. Below is Builder Content:</div>
<div v-if="content || isPreviewing()">
<div>
page title:
{{ content?.data?.title || 'Unpublished' }}
</div>
<Content
model="test"
:content="content"
:api-key="BUILDER_PUBLIC_API_KEY"
:customComponents="REGISTERED_COMPONENTS"
/>
</div>
<div v-else>Content not Found</div>
</div>
</template>
<script setup>
import { Content, fetchOneEntry, isPreviewing } from '@builder.io/sdk-vue';
import HelloWorldComponent from '../components/HelloWorld.vue';
// Register your Builder components
const REGISTERED_COMPONENTS = [
{
component: HelloWorldComponent,
name: 'MyFunComponent',
canHaveChildren: true,
inputs: [
{
name: 'text',
type: 'string',
defaultValue: 'World',
},
],
},
];
// TODO: enter your public API key
const BUILDER_PUBLIC_API_KEY = 'XXXX'; // ggignore
const route = useRoute();
// fetch builder content data
const { data: content } = await useAsyncData('builderData', () =>
fetchOneEntry({
model: 'test',
apiKey: BUILDER_PUBLIC_API_KEY,
userAttributes: {
urlPath: route.path,
},
})
);
</script>
But in my model nothing happens :
Even if my page is in my localhost :
What do i miss ?
Many thanks
