Vue-cliでdelimiters（区切り文字）を変更する方法

前提・実現したいこと

Twigと併用するためにVueの区切り文字が競合してしまうので、Vueのdelimitersを変更したいと考えていますが、同じようなことを質問した人が、作者からの引用で、

デリミタは、完全なビルド(vue.js)でランタイムコンパイルを使用する場合にのみ変更できます。 * .vueファイルでは機能しません(すべての* .vueファイル構文を一貫した状態に保つため)

という一文を紹介されたり、公式サイトでも

このオプションは完全ビルドでのみ利用可能で、ブラウザ内でのコンパイルが可能です。

とありますが、どうも回りくどくてよくわからないのですが、完全ビルドにするためにVueのインポートを

vue
1import Vue from 'vue/dist/vue.esm'
2

に変更してもダメなのですが、端的に言えば、Cliで区切り文字を変更するということは無理なのでしょうか？

行動規範の内容に同意します

回答2件

自己解決

質問の意図はvueの{{ message }} がtwigのdelimiterとして認識されてしまってエラーになったという話だったのですが、あれからいろいろやってみましたけど、
VueとTwigを併用させたいところに、

Twig
1{% verbatim %}
2<div id="app"></div>
3{% endverbatim %}

（バージョンによっては{% row %}{% endrow% })で囲めば、VueもTwigもデシメタを変更しなくても良いようです。ありがとうございました。

https://twig.symfony.com/doc/3.x/tags/verbatim.html

投稿2020/09/29 02:50

emesh0620

総合スコア14

面白くていろいろ調べてみましたが、なかなか難しそうですね。
質問でも言っている通りvue-cliもnuxtもランタイム限定ビルドを使うのでdelimitersオプションは使えないようです。
結構昔の話になってしまいますが、参考1によるとvueフレームワークの強みの一つであるサードパーティコンポーネントの利用ができなくなること、99%の人はdelimitersの変更を必要としてないことからvue-cliのルートインスタンスおよびコンポーネントオプションに実装はしない方向性のようです。

参考1の回答にあるようにvue-cliの大きなメリットであるSFCを投げ捨てて、やる方法はあるようです。
冷静に考えたらvue-cliをつかっているのにdelimitersを変えたいパターンってどんな時か気になりますね。

参考
https://jp.vuejs.org/v2/api/#delimiters
https://stackoverflow.com/questions/57407615/how-to-change-vue-clis-delimiters // 参考2
https://www.kuzilla.co.jp/blog/181206_symfony_vue_js
https://github.com/nuxt/nuxt.js/issues/1237
https://github.com/vuejs/vue-cli/issues/100 // 参考1

投稿2020/09/28 17:06

zushi0905

総合スコア683

emesh0620

2020/09/28 23:24 編集

>冷静に考えたらvue-cliをつかっているのにdelimitersを変えたいパターンってどんな時か気になりますね。 PHPのフレームワークを使ってまして、CDN版Vueは使っててもライブラリの管理が面倒なのでそろそろCli版にしたかったのですが、さりとて認証が絡むのでSPA変えたくない（かえられない）という事情です。 >delimitersオプションは使えないようです。やはりそうですか。なんかスマートなやり方は無いものですかね？