Vue.js change {{ }} tags

Question

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

An equivalent for w

Answer 1

Use this code to change template engine in vue js

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

Answer 2

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.

Answer 3

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

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

Answer 4

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

Answer 5

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: ['${', '}']
})