Keep Vue From Replacing Mounting Element's Inner Content

[KyleMo]

Problem: When mounting the app on an element all of said element's children are removed by Vue and replaced by the template provided. This occurs even if no template is provided (resulting in nothing appearing). This is NOT the behavior my team wants.

I'll start by saying I'm new to Vue. We prerender and serve the page's HTML immediately via .Net Razor Pages. Within the prerendered HTML document we add in the expected Vue functions that are loaded in via CDN to the browser. Once Vue loads in, it is then mounted to the appropriate element and all the prerender HTML gains functionality and doesn't remove any children elements.

It has been my task to try and update to Vue 3, implement typescript, and hopefully start using the newer .vue format. Getting all this to transpile and work has been a pain, but now all the work has been essentially made pointless because Vue overrides all inner content of the mounting element and we simply cannot accept this behavior. I've tried many different things to fix this. Any ideas would be appreciated.

Here is some code to get an idea of what we are doing

login.cshtml file (the EXTRA BUTTON always get removed)

<div class="login-wrapper wrapper" id="login">
    <bisresponse ref="response"></bisresponse>
    <button v-on:click="testFunc">EXTRA BUTTON</button>
</div>


@section Scripts {
    <script type="module" src="~/js/bundle.js" asp-append-version="true"></script>
}

The logic that gets added into the bundle.js file (pulling from a CDN caused more issues so trying to just use npm package of vue)

import Login from "../components/Login.vue";
import { createApp } from 'vue'

createApp({
    components: {
        'bisresponse': Login
    },
    template: '#login'
}).mount('#login')

And the Login.vue file

<script lang="ts">
import { defineComponent, onMounted } from "vue"
import useUserControls from "../composables/useUserControls"

export default defineComponent({
    setup() {
        const { email, password, loggingIn, loginUser } = useUserControls()

        const testFunc = () => {
            console.log(email.value)
            console.log(password.value)
        }

        return {
            email,
            password,
            loggingIn,

            loginUser,
            testFunc,
        }
    },
})
</script>

<template>
    <div>
        <button @click="testFunc">Test values</button>
        <form v-on:submit.prevent="loginUser" method="post" class="login-body">
            <div class="login-fields">
                <div class="field username">
                    <label>Email:</label>
                    <input v-model="email" type="text" />
                </div>
                <div class="field password">
                    <label>Password:</label>
                    <input v-model="password" type="password" id="password" />
                </div>
                <button
                    id="button-sign-in"
                    type="submit"
                    v-bind:disabled="loggingIn"
                    class="active auth-control-button"
                >
                    Sign In
                </button>
                <a class="auth-control-button" href="/forgot"
                    >Forgot Password</a
                >
            </div>
        </form>
    </div>
</template>

[absidue]

Have you tried removing the template option?

Vue will automatically use the container's innerHTML as the template if the root component does not already have a template option.

https://vuejs.org/guide/essentials/application.html#in-dom-root-component-template

[KyleMo]

Thanks for the suggestion. Yeah that definitely helped and has gotten me closer to the desired result. I think I've found a solution actually. Thank you for your help!