Sometimes, we want to fix conflict between templates of Twig and Vue.js.

In this article, we’ll look at how to fix conflict between templates of Twig and Vue.js.

How to fix conflict between templates of Twig and Vue.js?

To fix conflict between templates of Twig and Vue.js, we can change the delimiters when we’re creating the Vue instance.

For instance, we write

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

to set the template variable delimiters to be different from the default double curly braces in Vue 2.

In Vue 3, we write

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

to set the template variable delimiters to be different from the default double curly braces with Vue.createApp.

Conclusion

To fix conflict between templates of Twig and Vue.js, we can change the delimiters when we’re creating the Vue instance.