hapi — Use Vue.js Mustache Tags in Handlebars Templates

The hapi ecosystem provides a large amount of plugins and they extend the default framework’s functionality. One of these plugins is vision, which adds template rendering support for engines like handlebars.

Enhancing your web views with a client-side framework is common these days. When choosing Vue.js and handlebars for your hapi based project, you might run into trouble with your templates, because both —Vue.js and handlebars— use a mustache style {{ }} template syntax.

This tutorial shows you how to combine handlebars and Vue.js within your hapi app.

hapi Series Overview

The Problem

Vue.js and handlebars use a template syntax that’s based on mustache style brackets: {{ template }}. When rendering views on server side with hapi and handlebars, all syntax templates will be compiled and Vue.js won’t be able to pick up the related tags, because they’re already gone due to handlebars’ compilation process.

Let’s illustrate the problem with a simple example: you’ve a form input field that binds to a Vue.js model. The typed text should be displayed below the input as a preview.

The markup may look like this:

<div class="vue">  
            <label for="name">Name</label>
            <input type="text" id="name" v-model="name">
        Name is: {{ name }}

<script src="https://unpkg.com/vue"></script>  
  new Vue({
    el: '.vue',
    data: {
      name: ''

The input field has a v-model="name" attribute which connects to Vue’s data.name property.

Below the form, there’s a {{ name }} tag that should display the user input. When rendering this template with reply.view('template') in hapi, the {{ name }} tag won’t be available, because handlebars compiles this tag already and sends the HTML to the client. Vue.js won’t be able to pick up the tag anymore, it’s already gone (due to handlebars).

Escape Handlebars Syntax Templates That Should Be Picked Up by Vue.js

Related to the code snippet above, you want handlebars to ignore the {{ name }} tag and let Vue.js associate with it. To combine handlebars and Vue.js syntax templates, you need to escape the templates that Vue.js should pick up.


    Name is: {{ name }}


    Name is: \{{ name }}

All syntax templates prefixed with a backslash will be ignored by handlebars and left within the template. Vue.js is now able to connect with those tags and implement its reactivity.

This way you can control which templates should be rendered with handlebars and left out for Vue.js


Within this tutorial you’ve learned how to combine the handlebars rendering process and also using Vue.js as a frontend framework.

Even though both tools use mustache style brackets for the templating, make sure to escape the ones that handlebars should leave for Vue.js and the rendering chain (handlebars first, Vue.js second) will work for you.

We’re happy to hear your thoughts and comments. Please don’t hesitate to use the comments below or find us on Twitter @futurestud_io. Let us know what you think!

Enjoy coding & make it rock!

Additional Resources

Explore the Library

Find interesting tutorials and solutions for your problems.