Using Vue, Mustache, or other curly brace based templates in Hugo

support
1

I’m looking for feedback on my approach to using curly brace based templating in Hugo.

For me, it’s Vue, but for others, it might be mustache or a number of other things.

I need to be able to write my Vue next to my Hugo templates unencumbered by escaping or other tricks.

This works, but it kills productivity.

<div class="app>
  \{\{ foo \}\}
</div>

This is how I’m going about it

<!-- don't render Hugo template here -->
{{ safeHTML `
<div class="app">
  {{ foo }}
</div>
` }}
<!-- okay, render Hugo template again -->

This approach lets me work at my normal pace. I have to know that the HTML I write inside is safe to ship unescaped, but in my case it is.

I’d appreciate feedback from the Hugo experts.

2

So, both Vue and Alpine has single brackets and that should work just fine.

Go’s template package has a setting which allows setting the delimiter to use, but I think it’s more or less a global setting, and that would probably not help either.

1 Like
3

Someone has to take the step back :slight_smile:

new Vue({
    delimiters: ['<<', '>>'],
}

var customTags = [ '<%', '%>' ];
Mustache.render(template, view, {}, customTags);
Mustache.tags = customTags;

Mustache.render uses the customTags once, Mustache.tags would set them for the whole duration (until you set something else)

5 Likes
4

Very nice. What approach do you personally use?

5

I never used Hugo in connection with Vue.js, yet. Could be that this will happen, but in my opinion and the way I am using Vue the whole thing is separated because components in Vue are basically tags and I would enclose everything in components without ever arriving at the point where Hugo templates will collide/contaminate with Vue templates. It would be <my-vue-component>{{< hugoshortcode >}}</my-vue-component> instead and the javascript would do the template code.

Moustache… not sure. In the end I see Hugo and Mustache as identical. I would assume to not have use for Mustache code in my templates.

It’s probably a “religious” discussion :wink:

1 Like
6

Thinking deeper about it: If I would have to use a “curly brace templating system” I would probably put my “curly templates” into string-variables inside of javascript files. Separate! Don’t Mix!

7

Now that I have used Hugo a bit more, I found the best solution for me. I don’t need Hugo’s templating in content where I’m writing view. I keep all my Vue templating in headless content, then include it like a partial using .Site.GetPage.

There are occasionally outliers where I would want a bit of Vue template in an area where it would collide, and if that happens, I use this approach.

{{ safeHTML `
<div class="app">
  {{ foo }}
</div>
` }}
1 Like
8

Awesome! Thank you.