Vue: Custom delimiters not working in 2.0.0-rc.4

[ucmz]

Vue.js version

2.0.0-rc.4

Reproduction Link

Fiddle with version 2.0.0-rc.4 demonstrating the bug: https://jsfiddle.net/pth128xd/
Fiddle with version 1.0 and otherwise identical code: https://jsfiddle.net/yqyeL0hk/

Steps to reproduce

1. Set Vue.config.delimiters to some custom setting, such as ['${', '}']
2. Attempt to use custom delimiters in templates, e.g. ${ title }
   

   What is Expected?

Interpolation using these custom delimiters is done properly.

What is actually happening?

The custom delimiters are completely ignored.

[JoshTheDerf]

@ucmz Apparently delimiters are now defined per-component as vaguely mentioned here: https://github.com/vuejs/vue/issues/2873

[ucmz]

@Tribex Confirmed; thanks! I missed that in the original announcement.

Working example with 2.0.0-rc.4 for completeness' sake: https://jsfiddle.net/jqdtkscm/1/

[aryansoer]

Sorry guys, I've seen many answers, but there is no actual answer. Can you just show one simple example how to use delimiters in Components? (I mean in *.vue files)

[aryansoer]

Here is my component script. But it doesn't recognize delimiters

`export default {

    delimiters: ['${', '}'],

    data: function () {
        return {
            list: [],
            isLoading: false
        }
    },

    methods: {
        getList: function () {
            var self = this, url = laroute.route('rbac::roles.list');

            self.isLoading = true;

            self.$http.post(url).then(response => {
                self.list = response.data;
            }, response => {

            });
        },
    },

    mounted() {
        this.getList();
    },
}`

[LinusBorg]

Hello @isaevbehruz

The issue tracker is reserved exclusively for bug reports and feature requests.

We encourage you to ask it on the forum , Stack Overflow or on gitter and are happy to help you out there.

[JoshTheDerf]

@LinusBorg If he's using it like he says, then that is a bug report. (Though it should probably be in another issue with more details.)

@isaevbehruz Would you mind providing a JSFiddle reproducing your issue? This would be a good start: https://jsfiddle.net/jqdtkscm/1/

[LinusBorg]

If it's a bug report, he should open a separate issue for it, not recycle an old, closed, slightly related issue.

Also:

1. He was initially _asking_ how to use it., not claiming that it does not work, and
2. Your fiddle works as expected.

[JoshTheDerf]

@LinusBorg Alrighty. :)

[aryansoer]

Sorry, @LinusBorg, it's my bad asking here. @Tribex I also tried you example and yes it works... But as I mentioned in my above question, delimiters doesn't work with *.vue files. I'v put delimiters option and when I'v compiled it didn't work.

[LinusBorg]

Oh, you may be right, sorry. Need to check.

But if I remember correctly, changing delemiters may only available in the standalone build and with in-DOM templates. The reasoning was that templatws in .vue files are precompiled so they can't conflict with any other servet-side template system (which was why custom delimiters existed in the first place)

[LinusBorg]

Actually, it's in the docs that it's only available with standalone build:
http://vuejs.org/v2/api/#delimiters

Which are you using?
http://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build

[aryansoer]

Thanks, @LinusBorg, you're right! There is no need for custom delimiters at .vue files.

[fashtop3]

pls how can i change delimiters using vue webpack-simple

new Vue({
  delimiters: ['[[', ']]'],
  el: '#app',
  render: h => h(App)
}) 

this doesn't work... pls help me

[phamvansy]

pls how can i change delimiters using vue webpack-simple

new Vue({
delimiters: ['[[', ']]'],
el: '#app',
render: h => h(App)
})

this doesn't work... pls help me

Move delimiters into Vue to use template, example:

Vue.component('component-name', {
    delimiters: ['[[', ']]'], //add here
   template: `<p>[[ value ]]</p>` //use it

Don't add delimiters in new Vue({}) when use template.

[eymen-elkum]

in the case someone want this to work globally:

    Vue = Vue.extend({
        delimiters: ['<%', '%>']
    });

[proximadata]

@ayman-alkom thanks, but it doesn't work for me.
If I use this code it says "Vue is not defined" what is absolutely weird.
If I use the following code:

Vue.extend({
        delimiters: ['<%', '%>']
    });

it worked but only in the Vue app, not in a component. How to make it work in component defined only once globally? Thanks.