Conflict on Template of Twig and Vue.js

Question

I\'m doing a program using Slim 2 that uses Twig as my templating engine. so It uses the syntax {{ foo }} in php file. On the other hand, I\'m using vue.js, it

Answer 1

Also, for those who don't want to change vue's delimiter, you can change Twig delimiter (using Silex php framework in this example):

$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

Answer 2

I'm using VueJs v2, with the syntax bellow:

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

Where book.cover is one of the myVueInstance.$data.book fields.

Here's the docs

Answer 3

I read in another similar question to do:

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

to make it shorter. It works in SOME cases for me. But, thought you might like to see it anyway...

I didn't yet succeed to get it to work in all areas of my code.

Answer 4

The best solution is not to change either ones delimiter.

You can use the vuejs markup in twig like so

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

This obviously is suboptimal, so redefine your twig loader to preprocess files and replace {{{ with {{ '{{' }} and }}} with {{ '}}' }} then you can write the markup as

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

Much nicer.