CTAs not working with Vue.js 3 app

Marketing & Content Hub Blog, Website & Page Publishing
, ,
1

I’m encountering an issue integrating HubSpot CTAs into my Vue.js 3 SPA. The problem is that when the CTA HTML element is placed inside the Vue.js application, HubSpot’s HubSpotCallsToActions.refresh() does not detect or render the CTA properly. However, if I place the same CTA outside the Vue.js app (e.g., directly in the index.html file, outside the Vue-managed <div id=“app”>), the CTA works as expected and is detected by HubSpot without issues.

What I’ve tried:

  1. Manually calling HubSpotCallsToActions.refresh(): After rendering the Vue component, I made sure to call HubSpotCallsToActions.refresh() in Vue’s onMounted hook. However, it still doesn’t detect the CTA when it’s within the Vue app.
  2. Using nextTick(): I attempted to use Vue.nextTick() to ensure the DOM was fully rendered before refreshing the CTA, but this didn’t resolve the issue.
  3. Router-based solutions: Since it’s an SPA, I also tried refreshing the CTAs after route transitions using router.afterEach(). Unfortunately, it didn’t work when the CTA is inside the Vue app

Question:

Has anyone successfully integrated HubSpot CTAs within a Vue.js SPA, and if so, what was your approach to ensure HubSpot correctly detects and refreshes the CTAs?

2

Hi, @GLamps :waving_hand: Thanks for your question and for including the steps you’ve already taken. I’d like to invite some of our community members to the conversation — hey @stefen @TBanga do you have any experience with setting up CTAs in a Vue.js app?

Thank yo for taking a look! — Jaycee

3

Hi @Jaycee_Lewis @stefen @TBanga ,

Do you have any hints on this topic ?

Thank you,

Guillaume

4

We’re running into this as well. Calling

window.

HubSpotCallsToActions.refresh()

has no effect on links responding to being clicked. We’re having to use a hack on every route change in our app instead:

router.subscribe("onLoad", () => {
 window.hubspot_web_interactives_running = false;
 const script = document.createElement("script");
 script.src="https://js.hubspot.com/web-interactives-embed.js";
 document.head.append(script);
});