Использование express handlebars с vue js

Я создаю приложение, используя express handlebars для шаблонов на стороне сервера. На стороне клиента я хочу использовать vue.js. Тем не менее, они оба имеют одинаковую двойную скобку {{ variable }}. Прямо сейчас, моя вю.переменные js не отображаются, потому что мой шаблон руля переопределяет его. Например:

дома.HTML-код:

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

дома.js:

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

однако, если я определяю message в моем контроллере на стороне сервера:

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

сообщение появляться.

Итак, вкратце, есть ли способ использовать vue.js для шаблонов на стороне клиента, все еще используя express-handlebars для шаблонов на стороне сервера?

спасибо заранее!

9
handlebars.js node.js vue.js

3 ответов

вы можете изменить демлимитеры Vue на что-то другое, например: 

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

Это можно решить, избежав первой скобки в шаблоне руля.

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

вы можете "избежать" разделителей Vue в руле, используя сырой блок helper:

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

использование в шаблоне руля:

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