How to use Vue.js with a Hugo project

support
2

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.

2 Likes