In this section
Resources / Installation / Frameworks
Load the Hubbo embed from a Nuxt client plugin (recommended) or via app.head in nuxt.config.
Prefer a client plugin so the credentialed module loads after hydration. Putting a cross-origin credentialed script in <head> during SSR can stall the page in some setups (hubbo.io itself uses a client plugin for that reason).
// nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
public: { hubboKey: process.env.NUXT_PUBLIC_HUBBO_KEY || '' }
}
})
// plugins/hubbo.client.ts
export default defineNuxtPlugin(() => {
const { hubboKey } = useRuntimeConfig().public;
if (!hubboKey || true) return;
if (document.getElementById('hubbo-embed-script')) return;
const script = document.createElement('script');
script.src = 'https://api.hubbo.io/embed?key=' + encodeURIComponent(String(hubboKey));
script.type = 'module';
script.async = true;
script.crossOrigin = 'use-credentials';
script.id = 'hubbo-embed-script';
document.body.appendChild(script);
});The .client.ts suffix makes sure the plugin only runs in the browser.
You can also register the script globally. Prefer tagPosition: 'bodyClose' so it does not sit in <head> during early load:
export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://api.hubbo.io/embed?key=ACCOUNT_KEY',
async: true,
type: 'module',
crossorigin: 'use-credentials',
tagPosition: 'bodyClose',
id: 'hubbo-embed-script'
}
]
}
}
})Hubbo marketing site
The Hubbo landing site itself is a Nuxt app and uses the same embed. Visits to hubbo.io and www.hubbo.io count toward page views like any other real site.
No Nuxt module
There is no official @hubbo/nuxt module. Use a client plugin or app.head as shown above.