Using express handlebars with vue js

Question

I am building an app using express handlebars for server-side templating. On the client side, I want to use vue.js. However, they both share the same double brace notation {{ variable }}. Right now, my vue.js variables are not showing because my handlebars template is overriding it. For example:

home.html:

<div id="app">
   {{message}} //this will not show up
</div> 

home.js:

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    }
});

HOWEVER, if I define message in my server side controller:

res.render('../views/home', {
    message: 'message from handlebars'
});

the message will show up.

So in summary, is there a way i can use vue.js for client side templating while still using express-handlebars for server side templating?

Thanks in advance!

Answer 1

This can be solved by escaping the first brace in your handlebars template.

<div id="app">
   \{{message}} //this will not be replaced by handlebars
</div>