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

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

Home Forums Support How do I add Vue.js?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2028194
    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?

    #2028260
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #2028334
    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?

    #2028390
    Elvin
    Staff
    Customer Support

    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. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2028472
    Robert

    Wow this is amazing, you guys are the best!

    #2028569
    Elvin
    Staff
    Customer Support

    No problem. Glad to be of any help. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.