javascript - Conflict on Template of Twig and Vue.js -

i'm doing program using slim 2 uses twig templating engine. uses syntax {{ foo }} in php file. on other hand, i'm using vue.js, uses {{ bar }}.

e.g.

i'm gonna 2 way binding, below html code.

<div class="container">     label value: <label>{{ foo }}</label><br>     field value: <input v-model="foo"> </div> 

and here vue js code.

new vue({      el: '.container',     data: {         foo: 'hello world.'     } }); 

so hello world should in label value.

the output image below.

which did not worked, system thought it's twig variable. checked passing variable in view.

$app->get('/', function() use ($app) {     $app->render('login.php', [         'foo' => 'from php file'     ]); })->name('login'); 

so checked, label value: shows variable passed php file not on vue code.

kind of hard explain point. wondering how bypass twig's template , use {{ }} vue also.

just change default delimiters vue. here's how:

vue.js 1.0

define delimiters globally.

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

docs

---

vue.js 2.0

define delimiter on per component basis.

new vue({     delimiters: ['${', '}'] }) 

docs