Conflict on Template of Twig and Vue.js

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

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.

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