VueJS: Changing placeholder handlebars

When using VueJS on an HTML page rendered by server, the old clashing handlebars came rearing its head.

Specifically, my python backend (bottle.py framework ) was spitting out rendered HTML using its built in template engine 'Simple Template Engine'. It uses {{ }} for delimiters on views.

This clashed with default delimiters used by VueJS.

An easy solution was to change delimiters - on VueJS (since it was the newer entrant to the stack) - to ${ }

It was achieved easily by the following single line of code:

Vue.config.delimiters = ['${', '}']

Note: laravel's blade templating engine has a neat solution to this problem - add '@' before the braces and laravel ignores it: like so @{{ }}