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 $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.
Note: This rule is based on Vue 2.x API specifications.
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 alarmCompliant 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.