# Vue JS Form Integration

**URL:** <https://community.hubspot.com/t/vue-js-form-integration/12727>\
**Category:** APIs & Integrations\
**Tags:** forms\
**Created:** [February 1, 2019, 10:20pm UTC](https://community.hubspot.com/t/vue-js-form-integration/12727 "2019-02-01T22:20:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dub1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dub1/32/34294_2.png) [@dub1](https://community.hubspot.com/u/dub1)\
**Post date:** [February 1, 2019, 10:20pm UTC](https://community.hubspot.com/t/vue-js-form-integration/12727/1 "2019-02-01T22:20:05Z")

</div>

Hello,

I’m looking for resources on embeding Hubspots form into my Vue JS web app. The only documentation I can find is around React. I created the example below but am unable to get the form to populate when I load the page. Anyone have expereince with Vue or an example I could work with?

const HubspotForm = {

mounted() {

const script = document.createElement(“script”);

script.src = “[https://js.hsforms.net/forms/v2.js](https://js.hsforms.net/forms/v2.js)”;

document.body.appendChild(script);

script.addEventListener(“load”, () =\> {

if (window.hbspt) {

window.hbspt.forms.create({

portalId: “2323210”,

formId: “d8232cf6-b9ed-4abc-a81e-585801849cea”,

target: “#hubspotForm”

});

}

});

},

render() {

return (

\<div\>

\<div id=“hubspotForm” /\>

\</div\>

);

}

};

---

<div class="post-metadata">

**Author:** ![cbarley](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cbarley/32/82559_2.png) [@cbarley](https://community.hubspot.com/u/cbarley)\
**Post date:** [February 4, 2019, 6:27pm UTC](https://community.hubspot.com/t/vue-js-form-integration/12727/2 "2019-02-04T18:27:15Z")

</div>

Hey [@Jon\_McLaren](https://community.hubspot.com/t5/user/viewprofilepage/user-id/6365) , sorry for the ping here but I think I might have recalled you talking about using Vue.js with HubSpot in the [HubSpot Developers Slack](https://designers.hubspot.com/slack) org. Since I don’t have familiarity with Vue, would you have any examples of code you could share with @dub1 and the HubSpot Form embed code? @dub1 , if you aren’t already a member, I’d highly recommend joining our developer slack org I linked above. Wonderful folks like Jon are in there all the time working together on things and helping each other out. No worries if you don’t have any examples Jon, but thought I’d give pinging you a shot!

---

<div class="post-metadata">

**Author:** ![Jon\_McLaren](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jon_mclaren/32/8271_2.png) [@Jon\_McLaren](https://community.hubspot.com/u/Jon_McLaren)\
**Post date:** [February 4, 2019, 6:40pm UTC](https://community.hubspot.com/t/vue-js-form-integration/12727/3 "2019-02-04T18:40:30Z")

</div>

So when it comes to vue and the HubSpot forms, I try to completely avoid having the forms inside the actual vue instance if possible.  
The reason is the HS forms require a script tag, which is kinda dangerous inside a vue instance(I think if there’s an error in the hs form code it would possibly kill your vue instance as well)  
Also the HS forms use react, React and Vue don’t play nicely together because they both control the DOM, and store the state of all the fields and update them as well.  
I would say if you HAVE to include the form inside your vue component, use v-once on it. (you may have to put a div wrapper around the script tag with v-once on that instead of the script tag itself, as the form code will manipulate the html inside.)

> **[Vue.js](https://vuejs.org/api/)**
>
> Vue.js - The Progressive JavaScript Framework

This will cause vue to render the script then ignore it.  
If you need to dynamically render the form, say you need to change which form gets rendered, I’d use jquery to embed the form outside of the VueJS instance(your vue component can have the jquery necessary to do this, so for example if you have a button trigger- you can trigger your jquery from within the instance.)

---

<div class="post-metadata">

**Author:** ![Lou\_Rectoret](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lou_rectoret/32/21752_2.png) [@Lou\_Rectoret](https://community.hubspot.com/u/Lou_Rectoret)\
**Post date:** [February 10, 2021, 3:21pm UTC](https://community.hubspot.com/t/vue-js-form-integration/12727/4 "2021-02-10T15:21:47Z")

</div>

@dub1 Inspired by your own way I make it work, you were so close!

```lia-code-sample
<template>
 <h1>
 HubSportForm
 <div id="hubspotForm" v-once></div>
 </h1>

</template>

<script>
 export default {
 mounted() {
 const script = document.createElement("script");
 script.src="https://js.hsforms.net/forms/v2.js";
 document.body.appendChild(script);
 script.addEventListener("load", () => {
 if (window.hbspt) {
 window.hbspt.forms.create({
 portalId: "your-portal-id",
 formId: "your-form-id",
 target: "#hubspotForm"
 })
 }
 })
 }
}
</script>

```

@cbarleythere you have a code example

---

<div class="post-metadata">

**Author:** ![APello5](https://avatars.discourse-cdn.com/v4/letter/a/9e8a1a/32.png) [@APello5](https://community.hubspot.com/u/APello5)\
**Post date:** [January 17, 2024, 5:33am UTC](https://community.hubspot.com/t/vue-js-form-integration/12727/5 "2024-01-17T05:33:51Z")

</div>

Thanks, works fine for me