Archived topic
How do I add Vue.js?
5 replies · Started by Robert on November 28, 2021
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?
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 :)
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?
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. :D
Wow this is amazing, you guys are the best!
No problem. Glad to be of any help. :D
