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 ?

you may need to change delimiters: stackoverflow.com/questions/33628558/vue-js-change-tags — Lawrence Cherone
– Lawrence Cherone, Commented Nov 11, 2020 at 23:04

Simon E. · Accepted Answer · 2023-01-13 15:28:51Z

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.

edited Jan 13, 2023 at 15:28

answered Jan 13, 2023 at 9:40

Simon E.

59.3k18 gold badges146 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using interpolation with nunjucks and vue.js

1 Answer 1

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

2. Tell Vue to use different delimeters

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

2. Tell Vue to use different delimeters

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

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