Conflict on Template of Twig and Vue.js

javascript symfony twig vue.js

43,805

Solution 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: ['${', '}']
})

Solution 2

In this case you can either change vue.js tag marker (if any) or use twig verbatim tag (much better in my opinion) which mark a section as raw text which shouldn't be evaluated by twig parser. i.e:

{% verbatim %}
    new Vue({

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

From the twig docs:

The verbatim tag marks sections as being raw text that should not be parsed. For example to put Twig syntax as example into a template you can use this snippet:

Verbatim tag

Solution 3

I read in another similar question to do:

{{"{{vue.js variable here}}"}}

to make it shorter. It works in SOME cases for me. But, thought you might like to see it anyway...

I didn't yet succeed to get it to work in all areas of my code.

Solution 4

For Vue JS 2 (not sure about 1). You can use:

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

As per documentation: https://vuejs.org/v2/api/#v-text

Solution 5

Just a heads up. On Vue JS 2. The way of doing this is add an object to Vue.

new Vue({
    el: '#app',
    delimiters: ['${', '}'],
}

View more solutions

43,805

Author by

Wesley Brian Lachenal

Updated on February 02, 2022

Comments

Wesley Brian Lachenal over 2 years
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.
Wesley Brian Lachenal almost 9 years

Ohh! I saw that also but did not bother trying it, instead I tried autoescape and which did not worked. Hahaha. Now I tried that and it worked, I put that verbatim syntax between my vue " {% verbatim %} {{ foo }} {% endverbatim %} and it works! Thanks! :)
Wesley Brian Lachenal almost 9 years

Hello there, I will try this one and will let you know if this works. :)
TDawg almost 9 years

The previous answer from felipsmartins is better... it works in all cases. The above I sent seems to have limited uses... as far as my tests showed anyway.
Yauheni Prakopchyk over 8 years

Lifesaver for short variables and closest analog to laravel blade's @{{ variable }} escape. Mind sharing where exactly your solution didn't work?
naitsirch over 5 years

What was the down voting for? Please comment, when down voting!
zak over 4 years

'nicer' -> that's very subjective. I don't think that's nicer, obviously you do though...still, it's good you put it in..
zak over 4 years

Now that's nicer. no idea why the downvote but I just made up for that...