unable to add builder.io to my existing app

Question

I am trying to add builder.io to my vue 3 app. When reading the documentation, I am doing it correctly when trying to add a announcement-bar.

In my package.json file I have the dependency needed

  "dependencies": {
    "@animxyz/vue3": "^0.6.7",
    "@builder.io/vue": "^0.1.12",

main.ts

import { createApp } from 'vue';
import './index.css';
import App from './App.vue';
import { createPinia } from 'pinia';
import router from './router/route';
import BuilderVue from "builder.io/vue";
import '@builder.io/sdk-vue/vue3/css';

const API_KEY = process.env.BUILDER_API_KEY;
const ENV = process.env.BUILDER_ENV || "production";
const builder = BuilderVue({
    apiKey: API_KEY,
    env: ENV,
    data: {
        space: "test_poc",
    },
});

createApp(App)
    .use(router)
    .use(createPinia())
    .use(builder)
    }).mount('#app')

In my header I added the sdk library

import { RenderContent } from '@builder.io/sdk-vue/vue3';

....

<template>
         <RenderContent
          model="announcement-bar"
          :content="content"
      />
</template>

However it cannot find it import.

I have deleted the node_modules and cleaned my cache. Still it is unable to find it. I am not sure if this is related to vue 3 or if the docs are out of date.

Has anyone else had similar issues?