CTA Beta & Vue.js integration

Developer Support APIs & Integrations
1

Hi! I created a CTA form using the new Beta version and integrate it with my Vue.js app following the instructions:

1) Added the script tag to the index.html file

<script type=“text/javascript” id=“hs-script-loader” async defer src=“//js.hs-scripts.com/xxxxx.js”></script>

2) In my vue component created the Button with the properly classes

<base-button class=“hs-cta-trigger-button hs-cta-trigger-button-xxxxxxx”>Publish</base-button>

Everything works fine the first time, but after some navigation the button doesn’t work anymore.

I tried to add the v-once tag as this article says, but didn’t work

How to use JavaScript frameworks on HubSpot - HubSpot docs.

Any ideas about how to solve this?

2

Hello @diegoboedo
hs-script-loader script tag is not being loaded again after the page is navigated to. This is because the v-once directive prevents the button from being rendered more than once. you need to remove the v-once directive from the button. You can also use the :key directive to ensure that the button is rendered again after the page is navigated to.
You can use this code:

<base-button
 class="hs-cta-trigger-button hs-cta-trigger-button-xxxxxx"
 :key="uniqueId"
>
 Publish
</base-button>

The :key directive will generate a unique ID for the button each time it is rendered. This will ensure that the button is always rendered again after the page is navigated to.
Copmplete code:

<script>
export default {
 data() {
 return {
 uniqueId: 0,
 };
 },
};
</script>

<template>
 <base-button
 class="hs-cta-trigger-button hs-cta-trigger-button-xxxxxx"
 :key="uniqueId"
 >
 Publish
 </base-button>
</template>
3

Hey @himanshurauthan , thanks for your reply! I tried your solution and unfortunatelly still not working. Any other idea?

Thanks!