[Vuejs]-Failed to mount component: template or render function not defined. "vue.js" with asp.net mvc

by

0👍

✅

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.

Leave a comment