Sometimes, we want to change {{ }} tags with Vue.js.

In this article, we’ll look at how to change {{ }} tags with Vue.js.

How to change {{ }} tags with Vue.js?

To change {{ }} tags with Vue.js, we can set the delimiters property when we create the Vue instance.

For instance, we write

const app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!",
  },
  delimiters: ["[[", "]]"],
});

to set the delimiters property to ["[[", "]]"] in the object we create the Vue instance with.

Now we can use

[[ message ]] 

to render the message reactive property in a Vue component instead of the default curly braces.

Conclusion

To change {{ }} tags with Vue.js, we can set the delimiters property when we create the Vue instance.