replace

replace

• Type: Boolean

• Default: true

• Restriction: only respected if the template option is also present.

• Details:

  Determines whether to replace the element being mounted on with the template. If set to false, the template will overwrite the element’s inner content without replacing the element itself. If set to true, the template will overwrite the element and merge the element’s attributes with the attributes of the component’s root node.

• Example:

  <div id="replace" class="foo"></div>

  new Vue({
    el: '#replace',
    template: '<p class="bar">replaced</p>'
  })

  Will result in:

  <p class="foo bar" id="replace">replaced</p>

  In comparison, when replace is set to false:

  <div id="insert" class="foo"></div>

  new Vue({
    el: '#insert',
    replace: false,
    template: '<p class="bar">inserted</p>'
  })

  Will result in:

  <div id="insert" class="foo">
    <p class="bar">inserted</p>
  </div>