Vue.js change {{ }} tags

I want to change the {{ something }} by <% something %> in Vue.js, how could I achieve that, is it even possible?

An equivalent for what I look for in AngularJS:

var app = angular.module('app', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});

With the latest version (2.0.5), the above doesn't work. Rather than assigning to the global config, you pass the delimiters as an option to the Vue instance:

new Vue({
    el: '#app',
    data: data,
    delimiters: ["<%","%>"]
});

At least, that's what I had to do to make it work.


You should modify the delimiters property of configuration object.

Vue.config.delimiters = ['<%', '%>']

Edit: This solution works for Vue 1.x and lower. See @Skip and @jaynabonne responses for Vue 2.x solution


I am running Vue 2.1.0 standalone and this is what I had to use

Vue.options.delimiters = ['{[{', '}]}'];

If you are working with Vue 3.x, the documentation tells you to do this:

Vue.createApp({
  // Delimiters changed to ES6 template string style
  delimiters: ['${', '}']
})

Use this code to change template engine in vue js

 new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        } ,
        delimiters: ['<%' , '%>']
    });