Конфликт по шаблону Twig и Vue.js

В этом случае вы можете либо изменить маркер метки vue.js(если таковой имеется), либо использовать тег verbatim twig (что гораздо лучше, на мой взгляд), которые отмечают раздел как необработанный текст, который не следует оценивать парсером-поворотником. то есть:

{% verbatim %}
    new Vue({

        el: '.container',
        data: {
            foo: 'Hello world.'
        }
    });
{% endverbatim %}

В документах twig:

Стеновый тег отмечает разделы как сырые тексты, которые не должны быть разобран. Например, чтобы привести синтаксис Twig в качестве примера в шаблон, вы может использовать этот фрагмент:

• Verbatim tag

Я читал в другом подобном вопросе:

{{"{{vue.js variable here}}"}} 

чтобы сделать его короче. Он работает в НЕКОТОРЫХ случаях для меня. Но, подумал, что вам все равно может понравиться...

Мне еще не удалось заставить его работать во всех областях моего кода.

Для Vue JS 2 (не уверен насчет 1). Ты можешь использовать:

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

Согласно документации: https://vuejs.org/v2/api/#v-text

Просто голова. На Vue JS 2. Способ сделать это - добавить объект в Vue.

new Vue({
    el: '#app',
    delimiters: ['${', '}'],
}

Вместо того, чтобы менять разделители, делать компоненты менее пригодными для повторного использования или использовать странные механизмы двойного экранирования, вы можете использовать функцию source Twig.

Функция источника возвращает содержимое шаблона без его рендеринга:

{{ source('template.html') }}
{{ source(some_var) }}

Пример:

<!-- path/to/twig_template.html.twig -->
<script type="text/x-template" id="my-template">
    {{ source('path/to/vue-template.html') }}
</script>

<script>
    Vue.component('my-component', {
        template: '#my-template'
    });
</script>

Это проверено и работает - vue js vars в шаблоне ветки:

    new Vue({
       el: '#app',
       delimiter: ['{}'], // any delimiter you would like
    })

Лучшее решение - не менять ни один из разделителей.

Вы можете использовать разметку vuejs в ветке, как это

{{mytwigvar}} {{'{{'}} myvuevar {{'}}'}}

Это явно отстой, так что.... переопределите ваш загрузчик веток для предварительной обработки файлов и замените {{{{{'{{'}} и}}} {{'}}'}}, тогда вы можете написать разметку как

{{mytwigvar}} {{{myvuevar}}}

Гораздо приятнее.

Кроме того, для тех, кто не хочет изменять разделитель VUE, вы можете изменить разделитель Twig (используя в этом примере фреймворк Silex):

$app->before(function() use ($app){
    $app['twig']->setLexer( new Twig_Lexer($app['twig'], [
        'tag_comment'   => ['[#', '#]'],
        'tag_block'     => ['[%', '%]'],
        'tag_variable'  => ['[[', ']]'],
        'interpolation' => ['#[', ']'],
    ]));
});

https://twig.symfony.com/doc/2.x/recipes.html#customizing-the-syntax

Я использую VueJs v2 с синтаксисом ниже:

<img id="bookCover" style="border:none;width:200px" :src="book.cover">

Где book.cover является одним из полей myVueInstance. $data.book.

Здесь документы