Using express handlebars with vue js

问题

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!

回答1:

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

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

回答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>

回答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}}}}

来源：https://stackoverflow.com/questions/36530301/using-express-handlebars-with-vue-js

标签

node.js

handlebars.js

Vue.js