Builder public api key
9c477fefb92c46b68a5bd05ea08879e8
What are you trying to accomplish
I’m trying to integrate a builder.io section on a PHP page using Vue.js 3
Code stack you are integrating Builder with
LAMP + Vue.js
Problem description
I’m trying to integrate builder.io sections into an existing PHP website. The current (quite large) website codebase can’t be migrated to Vue.js/Nuxt in the near future due to limited available implementation time. To modernize the PHP pages in smaller steps, I introduced Vue.js, which works together fine inside PHP pages. Now I want to use the builder.io headless CMS in my PHP pages. In the PHP page, I’m already using Vue.js 3 (in CDN mode, using a script tag, no build step possible in my case). And now I’d like to use a builder.io section model inside the <div id="app"> part of the page (the part of the html template controlled by Vue.js).
I first tried using webcomponents integration mode, but Vue.js doesn’t like a <builder-component> in it’s template, I get warnings in the browser console I can’t insert custom tags:
<div id="app">
...
<builder-component model="homepage-section" api-key="9c477fefb92c46b68a5bd05ea08879e8">
Builder.io section is loaded here ...
</builder-component>
<script async src="https://cdn.builder.io/js/webcomponents"></script>
...
</div>
In console, I get:
[Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.
91 | Builder.io section is loaded here ...
92 | </builder-component>
Next, I tried using the builder.io sdk-vue integration using ESM module mode (the same way as with Vue.js 3 using it’s vue.esm-browser.js build). To make this work, I’d need an ESM browser build of the builder.io sdk-vue package. I tried using the current browser build from the lib/browser dir from the npm package:
# npm install @builder.io/sdk-vue
Next, I copy the lib/browser dir contents to my assets dir /assets/@builder.io/sdk-vue-2.0 to make the integration code available in my PHP page homepage-builder.php:
<div id="app">
...
<Content
v-if="canShowContent"
:model="model"
:content="content"
:api-key="apiKey"
></Content>
<div v-else>Builder content loading</div>
</div>
<script type="importmap">
{
"imports": {
"vue": "/assets/vuejs-3.4.31/vue.esm-browser.js",
"@builder.io/sdk-vue": "/assets/@builder.io/sdk-vue-2.0/index.mjs"
}
}
</script>
<script type="module">
import { createApp, ref, onMounted } from 'vue'
import { Content, fetchOneEntry, isPreviewing } from '@builder.io/sdk-vue'
const app = createApp({
setup() {
const mainBanners = ref(<?= json_encode($data['mainBanners']) ?>)
const pageReady = ref(false)
const content = ref(null)
// Add your Public API Key below
const apiKey = '9c477fefb92c46b68a5bd05ea08879e8'
const canShowContent = ref(false)
const model = 'homepage-section'
onMounted(async () => {
content.value = await fetchOneEntry({
model,
apiKey,
userAttributes: {
urlPath: window.location.pathname,
},
})
canShowContent.value = content.value ? true : isPreviewing();
pageReady.value = true
})
return {
mainBanners,
pageReady,
content,
apiKey,
canShowContent,
model
}
},
})
app.component('Content', Content)
app.mount('#app')
</script>
But, as expected, this doesn’t work because the lib/browser dir files are not bundled for use inside a browser. I tried to use the index.mjs file as ESM module, but this obviously doesn’t work.
Btw, without the builder.io sdk-vue integration in the PHP page, Vue.js 3 works perfectly fine using it’s esm-browser bundle: PHP fills the initial Vue data server-side and Vue next uses it client-side.
Has someone an idea if there is a browser ESM bundle available for the builder-io sdk-vue integration module or how I can create an ESM bundle file? Or am I overlooking something obvious?
Btw, I also looked at the HTML api integration, but this option has it’s limitations too: Custom components don’t work with HTML api.
Thanks in advance for ideas/suggestions!