Question

0

113

Views

Vue: Mount Component Directly to Body

I have a component that I want to mount directly to the body but not override the app HTML.

index.html (Basic boilerplate)

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

main.js

import { createApp } from "vue";
import App from "./App.vue";
import BodyComponent from "./BodyComponent.vue";

createApp(App).mount("#app");
createApp(BodyComponent).mount("body");

When I do this, it seems like the mount is greedy and it completely wipes out what was previously on the body (example)... I simply want to append the component to the body. I know that in the index.html file I can add a div with an ID that I want to mount my BodyComponent to, but I want to mount it on the body, nothing else. Is this possible?

7 months ago · Juan Pablo Isaza

Answer question

0

113

Vue: Mount Component Directly to Body

Find remote jobs