How to Mount Components in Vue.js 2.x

Asked 2 months ago, Updated 2 months ago, 3 views


to rewrite some existing HTML that is not SPA with Vue.js components Vue.js 1.x did the following:

<html>
<body>
  <popup></popup>
</body>
</html>
import Vue from 'vue'
import Popup from'./Popup.vue'

new Vue({
  el: 'body',
  components: {
      Popup
  }
});

If you write a similar code in Vue.js 2.x, you get the warning Do not mount Vue to <html>or <body>.
How do we make it happen?
When I tried the following, it seemed that the slot of the component was not configured.

import Vue from 'vue'
import Popup from'./Popup.vue'

new Vue({
  el: 'popup',
  render —h=>h(Popup)
});

vue.js

2022-09-30 12:02

1 Answers

From Vue.js 2.0, you can no longer mount the body.

You can solve this problem if you put a div tag around the part you were mounting on the body.

const Popup={
	template: `<p>popup</p>`
}

new Vue({
	el: "#app",
  components: {
      Popup
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<divid="app">
  <popup></popup>
</div>


2022-09-30 12:02

If you have any answers or tips


© 2022 OneMinuteCode. All rights reserved.