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

You can change the Vue demlimiters to something else, e.g.:

Vue.config.delimiters = ['${', '}']

Answer 2

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>

Answer 3

You can "escape" the Vue delimiters in Handlebars by using a raw block helper:

Handlebars.registerHelper('vue-js', function(options) {
  return options.fn();
});

Usage in the Handlebars template:

{{{{vue-js}}}}
<div id="app">
  {{message}}
</div>
{{{{/vue-js}}}}