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

Answer 1

Just change default delimiters for vue. Here's how:

Vue.js 1.0

Define delimiters globally (docs).

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

---

Vue.js 2.0

Define delimiters for component (docs).

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

---

Vue.js 3.0

Define delimiters for application (docs).

Vue.createApp({   delimiters: ['${', '}'] })