[FIXED] How do I use flask templating with Vuejs's “Mustache” syntax?

Issue

It seems there is some overlap.

For instance, this code:

  <div id="entry">
    <textarea rows="20" v-model="input"></textarea>
    <div>
      {{ input | md }}
    </div>
  </div>
  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script> 
 <script>
var vm = new Vue({
  el: '#entry',
  data: {
    input: ''
  },
  filters: {
    md: function(val){
      return marked(val)
    }
  }
})
</script>

seems to work alright here: https://jsfiddle.net/5qvc815w/ (aside from the html tags rendered in the markdown)

but in flask I am getting

jinja2.exceptions.TemplateAssertionError
TemplateAssertionError: no filter named 'md'

it seems to be looking to jinja2 to discover whats in the curly braces instead of in vue.js which it should be doing.

Solution

When Vue's default delimiters for interpolation clash with another framework, you can customize them.

var vm = new Vue({
  delimiters:['${', '}'],
  el: '#entry',
  data: {
    input: ''
  },
  filters: {
    md: function(val){
      return marked(val)
    }
  }
})

Used like so:

<div>
  ${ input | md }
</div>

Answered By - Bert