Can't use Vue.config.delimiters, can only set

Question

As per this answer, I'm trying to set Vue.config.delimiters = ['${', '}'] in order to use Vue with server-side handlebars.

When I just use the global config, it doesn't anything.

When I set delimiters on new Vues, it works

var game = new Vue({
        delimiters: ['${', '}'],
...

How can I make it work in one global place i.e. Vue.config.delimiter?

Answer 1

Global delimiters were removed in Vue 2, so you now have to set them on the Vue instance. From the Vue Github page:

...in 2.0 delimiters will become a component-level option, which means you only need to set it for the root instance that relies on in-DOM templates. Any components processed by vueify or vue-loader can just keep using default delimiters.

The change is intended to make it easier to use 3rd party components, since changing the delimiters globally means you will not be able to compile them correctly.

Answer 2

Just to add a bit more context to @craig_h's answer; i've had to use the Vue build with browser templates instead of .vue files so had to work with this.

I was initially adding it :

new Vue({
  store: store,
  el: el,
  delimiters: ['${', '}'],
})

And this wasn't working, but when i added it to:

Vue.component('name-line', {
  template: '#js-LineTemplate',
  delimiters: ['${', '}'],
  ...

It worked, this may be useful for someone who has run in to this issue