Utilizzo di manubri espressi con vue js

Question

Sto costruendo un'app utilizzando i manubri rapidi per il modello sul lato server. Sul lato client, voglio usare vue.js. Tuttavia, entrambi condividono la stessa notazione doppia coppia {{ variable }}. Al momento, le mie variabili vue.js non vengono mostrate perché il mio modello di manubri lo sta sovrascrivendo. Per esempio:

home.html:

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

home.js:

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

Tuttavia, se mi definisco message nel mio server di controller di lato:

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

il messaggio apparirà.

Quindi, in sintesi, c'è un modo in cui posso utilizzare vue.js per il client side templating mentre ancora utilizzo express-handlebars per il server side templating?

Grazie in anticipo!

Answer 1

è possibile modificare la Vue demlimiters a something else, ad es .:

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

Answer 2

Questo può essere risolto con la fuga della prima parentesi nel modello manubrio.

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

Answer 3

È possibile "fuga" dei delimitatori Vue a manubrio utilizzando una raw block helper:

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

uso nel modello Manubrio:

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