CODEWITHSUNDEEP
vuejs2
Festus Fashola
Festus Fashola

Reputation: 161

How can I specify delimiters for a VueJS component with a render method?

I have a vuejs webpack-simple project generated via vue-cli. However, I'm unable to set the delimiters when using the render function to render my App component:

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

If I don't use the render method, the delimiters are set correctly:

new Vue({
  delimiters: ['[[', ']]'],
  el: '#app',
  data() {
    return {
      // something
    }
  }
})

How can I specify the delimiters for a Vue component when using the render method?

Upvotes: 3

Views: 2906

Answers (1)

thanksd
thanksd

Reputation: 55664

The delimiters option only sets the delimiters for the component it is specified for and will not affect the children. Currently, you are specifying that the root Vue instance should have delimiters set to ['[[', ']]'], and then passing the App component definition to the render function without specifying a delimiters option for the App component.

If you're trying to set the delimiters just for the App component, then you'll need to do that wherever you are defining that component:

const App = {
  template: `<div>[[ message ]]</div>`,
  delimiters: ['[[',']]'],
  data() {
    return { message: 'Hello' }
  }
}

new Vue({
  el: '#app',
  render: h => h(App)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app"></div>

If you want to set the delimiters for every component, you can do that with a global mixin:

Vue.mixin({ delimiters: ['[[',']]'] });

const App = {
  template: `<div>[[ message ]]</div>`,
  data() {
    return { message: 'Hello' }
  }
}

new Vue({
  el: '#app',
  render: h => h(App)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app"></div>

Upvotes: 4

Related Questions