I am trying to get a simple Builder.io demo working. These are the steps I took but I keep seeing the following error
Vue: Cannot find module @builder.io/sdk-vue/vue
for
import { getContent, RenderContent, isPreviewing } from '@builder.io/sdk-vue/vue3';
Home.vue
<template>
<RenderContent
v-if="canShowContent"
model="home"
:content="content"
:api-key="apiKey"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getContent, RenderContent, isPreviewing } from '@builder.io/sdk-vue/vue3';
const canShowContent = ref(false);
const apiKey = 'f3db23b046cd407c9e072b1b55e995d3';
const content = () => getContent({
model: 'page',
apiKey: apiKey,
userAttributes: {
urlPath: window.location.pathname,
},
}).then(function(res: any) {
this.content = res;
this.canShowContent = content || isPreviewing();
}.bind(this));
</script>
main.ts
import './index.css'
import VueAnimXyz from '@animxyz/vue3'
import '@animxyz/core'
import App from './App.vue'
import { createPinia } from 'pinia'
import router from './router/route'
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(VueAnimXyz)
.use(builder)
.mount('#app')
package.json
"dependencies": {
"@animxyz/vue3": "^0.6.7",
"@builder.io/sdk-vue": "^1.0.2",
"@types/node": "^20.11.19",
"autoprefixer": "^10.4.17",
"axios": "^1.6.7",
"pinia": "^2.1.7",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"video.js": "^8.10.0",
"vue": "^3.4.19",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"typescript": "^5.3.3",
"vite": "^5.1.3",
"vue-tsc": "^1.8.27"
}
npm
npm i @builder.io/sdk-vue
Has anyone else had this issue and solved it? I seen a few posts but there were no answers.