How to use Vue.js with a Hugo project


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=""></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" }],

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

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:

Hope it helps!

I read your article and found it interesting, but I don’t understand how to implement the Vue SFC compilation.
Can You please share a complete project with a full example or more information about it?