How to render Vue's main app to the body element?

With Vue 2.0 you cannot mount root instance to the body or html element. You will be getting [Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead. error message.

The provided element merely serves as a mounting point. Unlike in Vue 1.x, the mounted element will be replaced with Vue-generated DOM in all cases. It is therefore not recommended to mount the root instance to <html> or <body>.

https://vuejs.org/v2/api/#el

The way around is to manually move your element on component mount() event.

<div id="app">
  <navbar :msg="msg"></navbar>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  <button @click="msg = 'tested'">Test 2-way binding</button>
</div>

Example workflow:

new Vue({
    el: '#app',
  data: {
    msg: 'message'
  },
  components: {
    'navbar': {
      template: `<navbar>{{ msg }}</navbar>`,
      props: ['msg'],
      mounted() {
        document.body.insertBefore(this.$el, document.body.firstChild)
      }
    }
  }
})

https://jsfiddle.net/jedrzejchalubek/m9dnsjjr/2/


With Vue 3 you can

let YourApp = {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  template: `
      <nav>Nav</nav>
      <header>Header</header>
      <span> inspect to see </span>
  `
}

// Browser Version - vue.global.js
Vue.createApp(YourApp).mount('body')
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.min.js"></script>

Tags:

Javascript

Html

Css

Vue.Js

Recent Posts