# Vue.JS Load Chat Widget CORS error

**URL:** <https://community.hubspot.com/t/vue-js-load-chat-widget-cors-error/52080>\
**Category:** APIs & Integrations\
**Tags:** conversations-inbox\
**Created:** [February 24, 2022, 12:51pm UTC](https://community.hubspot.com/t/vue-js-load-chat-widget-cors-error/52080 "2022-02-24T12:51:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![JLowe3](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jlowe3/32/193654_2.png) [@JLowe3](https://community.hubspot.com/u/JLowe3)\
**Post date:** [February 24, 2022, 12:51pm UTC](https://community.hubspot.com/t/vue-js-load-chat-widget-cors-error/52080/1 "2022-02-24T12:51:59Z")

</div>

Hi,

I’m trying to load the Hubspot Chat widget into my VueJS app.

I have the tracking script installed within index.html and then I want to be able to call the load function from within Vue.

 ![JLowe3_0-1645707047392.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/8/4/8492d72eb7a70301f5fe0c56b06c8c4a9ce9e079.png)

However, whenever I call the load function (even in the console), I seem to get a CORS error and I can’t load the chat widget.

 ![JLowe3_1-1645707087458.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/a/3a73a739341e28f1d1ab269accb2c183301c77de.png)

Any help would be appreciated

---

<div class="post-metadata">

**Author:** ![PamCotton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pamcotton/32/47916_2.png) [@PamCotton](https://community.hubspot.com/u/PamCotton)\
**Post date:** [February 25, 2022, 9:54pm UTC](https://community.hubspot.com/t/vue-js-load-chat-widget-cors-error/52080/2 "2022-02-25T21:54:30Z")

</div>

Hello @JLowe3, happy Friday!

I would like to invite some top experts @miljkovicmisa, @stefen @jpsanchez any recommendations to @JLowe3?

Thank you,

Pam

---

<div class="post-metadata">

**Author:** ![stefen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stefen/32/29274_2.png) [@stefen](https://community.hubspot.com/u/stefen)\
**Post date:** [February 27, 2022, 4:15pm UTC](https://community.hubspot.com/t/vue-js-load-chat-widget-cors-error/52080/3 "2022-02-27T16:15:32Z")

</div>

@JLowe3 are you using nuxt.js by chance? If so, it might be trying to run the script server side instead of client side. Try putting it inside a client only component as described here: [https://nuxtjs.ir/api/components-client-only](https://nuxtjs.ir/api/components-client-only)

---

<div class="post-metadata">

**Author:** ![JLowe3](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jlowe3/32/193654_2.png) [@JLowe3](https://community.hubspot.com/u/JLowe3)\
**Post date:** [February 28, 2022, 3:06pm UTC](https://community.hubspot.com/t/vue-js-load-chat-widget-cors-error/52080/4 "2022-02-28T15:06:37Z")

</div>

Hi @PamCotton @stefen,

We’re just using standard Vue 3. However, I seem to have fixed the issue, we’re using Azure App Insights in our application and we have a setting enabled that allows us to trace every HTTP request in the app for debugging.

This adds a “traceparent” header to each request and hubspot doesn’t seem to allow that so we’ve allowlisted the hubspot domain in the App Insights config and everything is working perfectly.

Thanks for reaching out to help!