'Linking external templates to Vue component in ASP.NET

I have an ASP. NET MVC project with Vue3 front-end. One specific Razor View is used as a Partial inside another view. I am attempting to write this partial view as a Vue component,since it s reused, but linking the .cshtml file to the template fails because of the following warnings, that actually make Vue not render any HTML in the end:

Tags with side effect ( and ) are ignored in client component templates.

[Vue warn]: Template element not found or is empty: #someid

, and i can't find a valid fix. Finally, here is some code:

        //parent Vue
const parent= {
    data: function () {
        return {
            parentData: 'some string'
        }
    },
    methods: function () {
    }
}

        //parent razor View
<div id="parentRazorView">
   <div>some stuff</div>
       <child-component>
           @Html.Partial("ChildRazorView", ChildRazorView.CreateChildViewModel("parentData"))    
               //this function creates child Razor View and sets .parentData in child to the value 
               //from parent
       </child-component>
    </div>
</div>
<script>
    const parentInstance = Vue.createApp(parent);
    parentInstance.component('child-component', child);
    parentInstance.mount("#parentRazorView");
</script>


        //child component
const child= {
    template: '#templateid',
    data: function () {
        return {
            parentData: null
        }
    },
    methods: function() {
    childMethod: function(){
    //do something
    }
}

        //child Razor View
<script id="templateid" type="text/template">
    <div @click="childMethod()"> {{parentData}} </div>
</script>

http://jsfiddle.net/ypb8c46d/ This is more or less my situation right now. you can see the mentioned warnings in the console.

And this is what I d like to achieve, only that my child razor view is far more complex and its contents have to be in the associated .cshtml file, thus I can't have the script template in the parent's cshtml file outside the app container as here: http://jsfiddle.net/ub7n1eqf/1/

So I guess, what I am trying to ask is how can I link the contents of a .cshtml file to a component's template as seen in the first fiddle without getting any of the above errors? As a sidenote, I am using the cdn version of Vue.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source