How to render Vue.js template code in a Jinja template?

Sometimes, we want to render Vue.js template code in a Jinja template.

In this article, we’ll look at how to render Vue.js template code in a Jinja template.

How to render Vue.js template code in a Jinja template?

To render by Vue.js template code in a Jinja template, we can set the delimiters property when we create the Vue instance to avoid conflicting with Jinja.

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 render by Vue.js template code in a Jinja template, we can set the delimiters property when we create the Vue instance to avoid conflicting with Jinja.