Question

175

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

rated 0 times [ 179] [ 4] / answers: 1 / hits: 16815 / 7 Years ago, mon, march 13, 2017, 12:00:00

I am building an admin page in a project that uses a paid-for theme called pages.

The issue is that in these themes, <nav> and <header> must be direct children of <body>.

When I use Vue to bootstrap the app, I am rendering it to a <div> with an id that's set to root. This then nests the <nav> and <header> within this container (i.e. under <div id=root>).

I have been searching high and low on how to get Vue components to become direct children of body.

How to do this?

What I am getting:

<body>

    <div>

        <nav></nav>

        <header></header>

    </div>

</body>

What the theme needs:

<body>

    <nav></nav>

    <header></header>

</body>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

grayson

Add To Favorites

Follow

Total Points: 36

Total Questions: 113

Total Answers: 95

Location: Tonga

Member since Fri, Aug 21, 2020

4 Years ago

grayson questions

1 js error : 'createObjectURL' on 'URL': Overload resolution failed.

Sat, Mar 26, 22, 00:00, 2 Years ago

1 Play/Pause video onScroll in Reactjs

Mon, Sep 14, 20, 00:00, 4 Years ago

1 React Hook useContext is called in function age which is neither a React function component or a custom React Hook function

Mon, Feb 3, 20, 00:00, 4 Years ago

1 Adding Square Brackets to JSON-Object

Fri, Feb 22, 19, 00:00, 5 Years ago

1 React: set State or set Prop without a Rerender

Sat, Feb 9, 19, 00:00, 5 Years ago

View All

answered 7 Years ago jacklynr · Accepted Answer

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://v2.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/