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

Question

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/vue@2.1.3/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.

Answer 1

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>