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?