How to Mount Components in Vue.js 2.x

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

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656