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>.

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>

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)

With Vue 3 you can

let YourApp = {
  data() {
    return {
      message: 'Hello World!'
  template: `
      <span> inspect to see </span>

// Browser Version -
<script src="[email protected]/dist/"></script>