HUGO

How to use Vue.js with a Hugo project

Hi,

I have an existing Hugo project and I’m looking to integrate Vue.js to it but I’m a bit lost on how to integrate Vue.js to the project.

Should I use Gulp to be able to auto build my Hugo project and Vue.js files ?

Thank you in advance ! :slight_smile:

1 Like

For example, (for vue3)
in head.html:
<script src="https://unpkg.com/vue@next"></script>

in a file called /static/js/myapp.js

var app = Vue.createApp({
  delimiters: ["[[", "]]"],
  data() {return {
    col1cards: [{issuetype: "Feature Request", issuecolor: 'bg-green-50' },
    {description: "issuetype: "Test", issuecolor: "bg-orange-50" },
    {description: "issuetype: "Task", issuecolor: "bg-blue-50" }],
  }},
}).mount('#board');

Then, include it in the bottom of a Hugo template,
<script src="/js/myapp.js"></script>

(that would be any .html under /layouts or the themes//layouts)

Then set the ID of the outermost div of the template to the mount point specified in the Vue app.

<div id="board">
  ... the rest of the template
</div>

then your Vue app would have visibility in the DOM from there down.

For example, if that template included the fragment:

<span>[[ card.issuetype ]]</span>

Then Vue would replace the variable [[ card.issuetype ]] with the value from the app.

You might also choose to write Vue templates apart from Hugo templates, and not mix them, as in the example above, just pull them in where needed.

1 Like

Here’s a more complete writeup of how to implement Vue in Hugo:

https://www.michaelgodeck.com/how-to/vue-in-hugo/

Hope it helps!