Install Hubbo in Vue

Add the Hubbo embed snippet to a Vue 3 app created with create-vue / Vite.

Hubbo does not need a Vue plugin. Add the snippet to the HTML shell of your single-page app and you are done. New apps should use create-vue (Vite).

Vite / create-vue (index.html)

Open index.html in the project root and place the snippet before the closing </head> tag:

<script src="https://api.hubbo.io/embed?key=ACCOUNT_KEY" id="hubbo-embed-script" async type="module" crossorigin="use-credentials"></script>

Legacy Vue CLI

Vue CLI is no longer the recommended starter. On an existing CLI app, add the same snippet to public/index.html inside <head>.

Loading from a component

If the HTML shell is not available to you, load the script once from App.vue:

<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(() => {
  if (document.getElementById('hubbo-embed-script')) return;

  const script = document.createElement('script');
  script.src = 'https://api.hubbo.io/embed?key=ACCOUNT_KEY';
  script.type = 'module';
  script.async = true;
  script.crossOrigin = 'use-credentials';
  script.id = 'hubbo-embed-script';
  document.body.appendChild(script);
});
</script>

Vue Router

Hubbo evaluates notification, NPS and survey URL rules against the real browser location, so it keeps working when Vue Router changes the URL.

Building a Nuxt app instead? See Install Hubbo in Nuxt.