APIs & Integrations

LBenediktson
Member

Using Vue 3 in HubSpot theme modules

Hello. I want to use Vue 3, since Vue 2 announced it end of support in the end of this year.

First of all, please, please, PLEASE update your docs so others won't have to waste a ton of time like myself (issue will become clear below).

 

So I first went to your How to use JavaScript frameworks page where you show a code snippet for hello world in Vue 2, but ALL your links are to Vue 3 pages (link to docs, link to CDN for vue etc). Very annoying.

 

Once I figured that out I tried to implement using Vue 3's guide with their new approach of setting up the app. Short story: it does not work. I have no idea what is causing this, but it seems HubSpot's and Vue's compilers are clashing resulting in this:

Screenshot 2023-06-07 at 18.16.33.png

 

My code for this looks like this:

```
// module.html

{{ require_js(get_asset_url('../../js/vue.global.js'), { position: 'head' }) }}

{% raw %}
    <div id="vue-test-app"></div>
{% endraw %}

// module.js
addEventListener("DOMContentLoaded", () => {
    Vue.createApp({
       data() {
          return {
             message: 'Hello Vue!'
          };
       },
       templatee: '<h1>{{ message }}</h1>'
    }).mount('#vue-test-app');
});

```

 

Since this did not work regardless where I put the template (tried putting it in the module.html like your Vue 2 example and it did not work), I tried using Vue 2 and that works, but only if your template is in module.html and not in the `template` property in the Vue app/component itself.

 

Stuff like this would be awesome to have in your docs.

HubSpot is earning billions of dollars and it is really a shame that you are not investing in better DX as developers plays a huge role in your products (at least CMS themes etc). I won't go into details here, but your CLI error messages are sooo terrible and sometimes highlighting stuff that is not even the issue. And now fighting with this...

 

Besides that, any help would be greatly appreciated, even if the answer is that Vue 3 is currently not supported in which case I will have to stick with Vue 2 unfortunately... Thanks a lot.

0 Replies 0

0 Replies

No replies on this post just yet

No one has replied to this post quite yet. Check back soon to see if someone has a solution, or submit your own reply if you know how to help! Karma is real.

Reply to post

Need help replying? Check out our Community Guidelines