[Support request] How do I add Vue.js?

[Robert]

I am trying to use a new hook element to add some vue.js code but I’m not having any luck. Is there a simple way to add vue just to generatepress?

[Ying]

Hi Robert,

You can wrap the JS code with <script></script> in the hook element, set the hook name to wp_footer, choose location as your needs.

Let me know if this helps 🙂

[Robert]

I did that, and then on the page I created an html element with id=”app”, like so:

<div id="app">
  {{ message }}
</div>

In the hook this is what I have:

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

I also have a separate element to load in the vue script:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

Am I missing something?

[Elvin]

Hi Robert,

Create 2 Hook Elements.

On the first hook, set it’s hook to wp_head and add this one:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

On the second hook, set it’s hook to wp_footer and add your vue js init script.

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

After setting this up, your <div id="app"> w/ {{...}} element should work. 😀

[Robert]

Wow this is amazing, you guys are the best!

[Elvin]

No problem. Glad to be of any help. 😀

[Author]

Posts