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

Answer 1

Instead of changing delimiters, making components less reusable or using less readable double escaping mechanisms, you can use Twig's source function.

The source function returns the content of a template without rendering it:

{{ source('template.html') }}
{{ source(some_var) }}

Example:

<!-- path/to/twig_template.html.twig -->
<script type="text/x-template" id="my-template">
    {{ source('path/to/vue-template.html') }}
</script>

<script>
    Vue.component('my-component', {
        template: '#my-template'
    });
</script>

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

This is tested and working - vue js vars in twig template:

    new Vue({
       el: '#app',
       delimiter: ['{}'], // any delimiter you would like
    })

Answer 6

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

Vue.js 1.0

Define delimiters globally.

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

Docs

---

Vue.js 2.0

Define delimiter on per component basis.

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

Docs