title: How to render Vue's main app to the body element?
body: <p>I am building an admin page in a project that uses a paid-for theme called "pages". </p>
  
  <p>The issue is that in these themes, <code>&lt;nav&gt;</code> and <code>&lt;header&gt;</code> must be direct children of <code>&lt;body&gt;</code>. </p>
  
  <p>When I use Vue to bootstrap the app, I am rendering it to a <code>&lt;div&gt;</code> with an <code>id</code> that's set to <code>root</code>. This then nests the <code>&lt;nav&gt;</code> and <code>&lt;header&gt;</code> within this container (i.e. under <code>&lt;div id="root"&gt;</code>).</p>
  
  <p>I have been searching high and low on how to get Vue components to become direct children of body. </p>
  
  <p>How to do this?</p>
  
  <hr>
  
  <p>What I am getting:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div&gt;
          &lt;nav&gt;&lt;/nav&gt;
          &lt;header&gt;&lt;/header&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>What the theme needs:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;nav&gt;&lt;/nav&gt;
      &lt;header&gt;&lt;/header&gt;
  &lt;/body&gt;
  </code></pre>