Wesley Lachenal Wesley Lachenal - 2 months ago 133
Twig Question

Conflict on Template of Twig and Vue.js

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 also uses
{{ bar }}
.

E.g.

I'm gonna do the two way binding, below is my html code.

<div class="container">
Label Value: <label>{{ foo }}</label><br>
Field Value: <input v-model="foo">
</div>


and here is my vue js code.

new Vue({

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


So the Hello world should be in the Label Value.

The output is the image below.

enter image description here

Which it did not worked, probably the system thought it's a twig variable. So I checked by passing variable in a view.

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


So I checked, the Label Value: shows the variable that I passed from the PHP file not on the VUE code.

Kind of hard to explain but you get the point. Was wondering how to bypass twig's template and use the
{{ }}
from vue also.

enter image description here

Answer

You can change default delimiters for vue.

From documentation:

Vue.config.delimiters = ['${', '}']
Comments