In this section

Resources / Installation / Frameworks

Install Hubbo in Nuxt

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).

Recommended: client plugin

// 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.

Alternative: nuxt.config app.head

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.