# CTA Beta & Vue.js integration

**URL:** <https://community.hubspot.com/t/cta-beta-vue-js-integration/84507>\
**Category:** APIs & Integrations\
**Tags:** forms\
**Created:** [June 30, 2023, 5:34pm UTC](https://community.hubspot.com/t/cta-beta-vue-js-integration/84507 "2023-06-30T17:34:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![diegoboedo](https://avatars.discourse-cdn.com/v4/letter/d/96bed5/32.png) [@diegoboedo](https://community.hubspot.com/u/diegoboedo)\
**Post date:** [June 30, 2023, 5:34pm UTC](https://community.hubspot.com/t/cta-beta-vue-js-integration/84507/1 "2023-06-30T17:34:57Z")

</div>

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](https://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](https://developers.hubspot.com/docs/cms/guides/js-frameworks#working-with-hubspot-forms-and-ctas-within-vue-components).

Any ideas about how to solve this?

---

<div class="post-metadata">

**Author:** ![himanshurauthan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/himanshurauthan/32/53076_2.png) [@himanshurauthan](https://community.hubspot.com/u/himanshurauthan)\
**Post date:** [July 3, 2023, 11:55am UTC](https://community.hubspot.com/t/cta-beta-vue-js-integration/84507/2 "2023-07-03T11:55:48Z")

</div>

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:

```lia-code-sample
<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:

```lia-code-sample
<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>

```

---

<div class="post-metadata">

**Author:** ![diegoboedo](https://avatars.discourse-cdn.com/v4/letter/d/96bed5/32.png) [@diegoboedo](https://community.hubspot.com/u/diegoboedo)\
**Post date:** [July 3, 2023, 4:32pm UTC](https://community.hubspot.com/t/cta-beta-vue-js-integration/84507/3 "2023-07-03T16:32:26Z")

</div>

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

Thanks!