Vue instance should be mounted on a proper element

  • VUE_BAD_MOUNT_ELEMENT
  • Error
  • Medium
  • vue

This rule applies when the mounting point of a Vue instance is inappropriate.

The mount element provided as a value of el option or an argument of vm.$mount() will be replaced with Vue-generated DOM. It is therefore not recommended to mount a Vue instance on <html> or <body> element. In this case, Vue does not render the element and outputs a warning message.

Noncompliant Code Example

View with compliant examples side by side
<!-- HTML file -->
<html>
  <head></head>
  <body>
  </body>
</html>

// JavaScript file
import Vue from 'vue';

// Example 1
new Vue({
  el: 'html', // VUE_BAD_MOUNT alarm
  template: '<div>Hello!</div>'
});

// Example 2
const MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
});
new MyComponent().$mount('body'); // VUE_BAD_MOUNT alarm

Compliant Code Example

View with noncompliant examples side by side
<!-- HTML file -->
<html>
  <head></head>
  <body>
    <div id="app1"></div>
    <div id="app2"></div>
  </body>
</html>

// JavaScript file
import Vue from 'vue';

// Example 1
new Vue({
  el: '#app1',
  template: '<div>Hello!</div>'
});

// Example 2
const MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
});
new MyComponent().$mount('#app2');

Version

This rule was introduced in DeepScan 1.18.0.

See

  • el

  • vm.$mount

  • [Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.