Wesley Lachenal Wesley Lachenal - 1 month ago 23x
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 }}


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">

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'

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


You can change default delimiters for vue.

From documentation:

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