Using interpolation with nunjucks and vue.js

Question

I'm using nunjucks which compile mustache syntax like this : {{ value }}, and I'm using in the same time vue.js, which also use the same syntax for interpolation.

When I use interpolation to bind some value, nunjucks compile it first, which I want to be compiled by vue.js later and not nunjucks, so I was looking for something that I can do to skip interpolation for nunjucks, but with no luck.

A solution I can do here, is to use something else to print the value in vue.js without the use of interpolation, but it seems like it's the only why to print variables in the vue.

Any suggestions on how to solve this ?

Answer 1

There's two ways to do this. I prefer the first way.

1. Tell Nunjucks to ignore {{ }} for a specific portion of code

From the docs: If you want to output any of the special Nunjucks tags like {{, you can use a {% raw %} block and anything inside of it will be output as plain text.

{% raw %}
   ...put all your Vue template code in here...
{% endraw %}

2. Tell Vue to use different delimeters

new Vue({
    el: '#app',
    data: data,
    delimiters: ["<%","%>"]
});

Then in your Vue templates, use <% someValue %> instead of {{ someValue }}.

Vue 3 has a slightly different syntax, but the concept is the same.