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.

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.