Failed to mount component: template or render function not defined. “vue.js” with asp.net mvc

Question

I have a small tutorial project , I wrote it for learning integrate vue.js with mvc.
I have 1 component and I use it in vue instance and everything was ok when I write html code for that components into js file (I have 2 files .cshtml and .js for each vue component)
the scenario which working is

test1.cshtml.js file is

import Vue from "vue";
document.addEventListener('DOMContentLoaded', function (event) {
    Vue.component('test1',{        
        mounted: function () { },
        data: function () {
            return {
            };

        },
        template: `
                <div>
                <ul>
                    <li>Yaman</li>
                </ul>
                </div>
  `
    });
});

and vue instance is

contact.cshtml.js file is

import Vue from "vue";

import test1 from "../Home/test1.cshtml.js"; Vue.component('test1', test1);

document.addEventListener('DOMContentLoaded', function (event) {
    let view = new Vue({
        el: document.getElementById('view'),          
        mounted: function () { },
        data: {
            message: "One-way binding msg",
            twoWayBindingMessage: "Type here ..."
        }        
    }); });

and contact.cshtml file is

@{
    ViewData["Title"] = "Hello World - Page";
}

<section>
    <div id="view">
        <h4>@ViewData["Title"]</h4>
        <h3>@ViewData["Message"]</h3>
        <div>
            <span>One way binding message:{{message}}</span>
            <br /><hr />
            <span>2-way binding msg: {{twoWayBindingMessage}}</span><br />
            <br />
            <input type="text" v-model="twoWayBindingMessage">

            <test1></test1>
        </div>
    </div>
</section>
<script src="~/js/Contact.bundle.js"></script>

but my problem starts when i try writing test1 template into separate file "cshtml file" as "contact file"

the scenario which not working is

test1.cshtml file become

import Vue from "vue";

document.addEventListener('DOMContentLoaded', function (event) {
    Vue.component('test1',{        
        mounted: function () { },
        data: function () {
            return {
            };
        }
    });
});

and test1.cshtml is

<section>
    <div  id="testnew">
        <ul>
            <li>Yaman</li>
        </ul>
    </div>        
</section>
<script src="~/js/test1.bundle.js"></script>

in this scenario I receive this error

Contact.bundle.js:6 [Vue warn]: Failed to mount component: template or render function not defined.

found in

--->

Can anyone help me please?

Yaman Melhem Yaman Melhem · Accepted Answer · 2019-07-03T12:50:09

finally i found the solution :) we should
1- add this part to webback.config after instal html loader

    {
        test: /\.(html|cshtml)$/,
        loader: 'html-loader'
    },

2- import cshtml file in .js file

import test1Html from "../Home/test1.cshtml";

3- use above import as template in js file

template: test1Html,

vue component js file should be as below

import Vue from "vue";
import test1Html from "../Home/test1.cshtml";

document.addEventListener('DOMContentLoaded', function (event) {
    Vue.component('test1',{
        mounted: function () {
            console.log('mounted test1');
        },
        template: test1Html,
        data: function () {
            return {
                message: "try test1 binding",
                list: ['one','two','three','four','five']
            };
        }
    });
});

thanks alot.

Failed to mount component: template or render function not defined. “vue.js” with asp.net mvc

1 Answers