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.
