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

**URL:** <https://discourse.gohugo.io/t/using-vue-mustache-or-other-curly-brace-based-templates-in-hugo/26159>\
**Category:** support\
**Created:** [June 10, 2020, 2:27am UTC](https://discourse.gohugo.io/t/using-vue-mustache-or-other-curly-brace-based-templates-in-hugo/26159 "2020-06-10T02:27:03Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ryanburnette](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ryanburnette/32/11537_2.png) [@ryanburnette](https://discourse.gohugo.io/u/ryanburnette)\
**Post date:** [June 10, 2020, 2:27am UTC](https://discourse.gohugo.io/t/using-vue-mustache-or-other-curly-brace-based-templates-in-hugo/26159/1 "2020-06-10T02:27:03Z")

</div>

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.

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

```

This is how I’m going about it

```auto
<!-- 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.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [June 10, 2020, 6:42am UTC](https://discourse.gohugo.io/t/using-vue-mustache-or-other-curly-brace-based-templates-in-hugo/26159/2 "2020-06-10T06:42:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [June 10, 2020, 9:14am UTC](https://discourse.gohugo.io/t/using-vue-mustache-or-other-curly-brace-based-templates-in-hugo/26159/3 "2020-06-10T09:14:23Z")

</div>

Someone has to take the step back 🙂

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

```

```auto
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)

---

<div class="post-metadata">

**Author:** ![ryanburnette](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ryanburnette/32/11537_2.png) [@ryanburnette](https://discourse.gohugo.io/u/ryanburnette)\
**Post date:** [June 10, 2020, 12:29pm UTC](https://discourse.gohugo.io/t/using-vue-mustache-or-other-curly-brace-based-templates-in-hugo/26159/4 "2020-06-10T12:29:14Z")

</div>

Very nice. What approach do you personally use?

---

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [June 10, 2020, 1:13pm UTC](https://discourse.gohugo.io/t/using-vue-mustache-or-other-curly-brace-based-templates-in-hugo/26159/5 "2020-06-10T13:13:35Z")

</div>

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 😉

---

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [June 10, 2020, 1:25pm UTC](https://discourse.gohugo.io/t/using-vue-mustache-or-other-curly-brace-based-templates-in-hugo/26159/6 "2020-06-10T13:25:20Z")

</div>

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!_**

---

<div class="post-metadata">

**Author:** ![ryanburnette](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ryanburnette/32/11537_2.png) [@ryanburnette](https://discourse.gohugo.io/u/ryanburnette)\
**Post date:** [August 17, 2020, 2:18am UTC](https://discourse.gohugo.io/t/using-vue-mustache-or-other-curly-brace-based-templates-in-hugo/26159/7 "2020-08-17T02:18:14Z")

</div>

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.

```auto
{{ safeHTML `
<div class="app">
  {{ foo }}
</div>
` }}

```

---

<div class="post-metadata">

**Author:** ![Weru](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/weru/32/7300_2.png) [@Weru](https://discourse.gohugo.io/u/Weru)\
**Post date:** [September 26, 2020, 6:53pm UTC](https://discourse.gohugo.io/t/using-vue-mustache-or-other-curly-brace-based-templates-in-hugo/26159/8 "2020-09-26T18:53:19Z")

</div>

Awesome! Thank you.