ソニックムーブで、マークアップしたりJavascriptをかじったりしてるココエです。
弊社では、サイト構築の際、高確率でPhalconフレームワークが採用されるわけですが、その際Phalcon フロントエンドで利用されるテンプレートエンジンVoltとVue.jsと一緒に利用して困った点をあげます。
・・・まあ、困った点といっても、1点だけなんですけどねｗ
Phalcon VoltとVue.jsは、式展開が二重中括弧
PhalconのテンプレートエンジンVolt。
「基本的な使用法」の章を引用。
Basic Usage
A view consists of Volt code, PHP and HTML. A set of special delimiters is available to enter into Volt mode. {% ... %} is used to execute statements such as for-loops or assign values and {{ ... }}, prints the result of an expression to the template.
Google翻訳
基本的な使用法
ビューは、ボルトコード、PHPとHTMLで構成されています。特別なデリミタのセットは、ボルトモードに入るために利用可能です。{% ... %}for-loopsや値の代入などの文を実行し{{ ... }}、式の結果をテンプレートに出力します。
つまり、二重中括弧（Mustache）で式の結果だしますよーって書いてあります。
そして、Vue.js。
テンプレート構文・展開の章を引用
データバインディングのもっとも基本的な形は、”Mustache” 構文(二重中括弧)を利用したテキスト展開です:
というわけで、VoltもVue.jsも、式展開が二重中括弧(Mustache)になるので、VoltかVue.jsが二重中括弧以外の式展開をさせる必要があるわけです。
Vue.js delimitersオプション
回避方法として、Vue.jsのdelimitersオプションを利用するのが良いと思います。
<div id="app">
<%- hoge %>
</div>
<script>
new Vue({
delimiters: ['<%-', '%>'],
el: '#app',
data: {
hoge: 'ほげほげ'
},
});
</script>
delimitersオプションArray<string>に指定する配列値、
index 0 には、{{に該当する記号を、index 1 には、}}に該当する記号を指定します。
delimitersオプションはコンポーネントレベル
delimitersオプションは、コンポーネントレベルのオプションなので、new Vueしているrootに設定しただけでは、すべてのコンポーネントのdelimitersを変換してくれません。
※うまくいかない例：
https://jsfiddle.net/kokoe/5ezx7Low/
<%- fuga %>って文字列として出力されてますね。
グローバルMixinにdelimitersオプションを指定しちゃう
こういうケースは、もうグローバルMixinでelimitersを指定しちゃっていいんじゃないかと思います。
Vue.mixin({
delimiters: ['<%-', '%>'],
});
公式の説明にも記載されていますが、
上記の例だと<%- %>で展開される構文を使うサードパーティと併用できないので、
本当にグローバルMixinを使っていいのかは、ちゃんと全体設計を考えた上で指定したほうがいいかもしれませんね。
（まあ、こんなケース自体あんまりないと思いますが。。あとdelimitersで指定する記号を再考するとか。）
まとめ
Vue.mixin({
delimiters: ['<%-', '%>'], //配列値は、開発環境に合わせて変えてくださいね
});
で、おおよそ解決。