When using <a href="http://vuejs.org/">VueJS</a> on an HTML page rendered by server, the old clashing handlebars came rearing its head.
Specifically, my python backend (<a href="http://bottlepy.org/docs/dev/index.html">bottle.py framework</a> ) was spitting out rendered HTML using its built in template engine &#39;Simple Template Engine&#39;. It uses {{ }} for delimiters on views. 
This clashed with default delimiters used by <a href="http://vuejs.org/">VueJS</a>.
An easy solution was to change delimiters - on <a href="http://vuejs.org/">VueJS</a> (since it was the newer entrant to the stack) - to ${ }
It was achieved easily by the following single line of code:
<pre><code>Vue.config.delimiters = ['${', '}']
</code></pre>Note: laravel&#39;s blade templating engine has a neat solution to this problem - add &#39;@&#39; before the braces and laravel ignores it: like so @{{ }}

When using [VueJS](http://vuejs.org/) on an HTML page rendered by server, the old clashing handlebars came rearing its head.

Specifically, my python backend ([bottle.py framework](http://bottlepy.org/docs/dev/index.html) ) 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](http://vuejs.org/).

An easy solution was to change delimiters - on [VueJS](http://vuejs.org/) (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 @{{ }}

VueJS: Changing placeholder handlebars

Product

Explore

Company

Blogs

Support