Загрузка шаблона компонента из файла

Question

Наличие шаблона компонента в виде встроенного HTML мне не очень удобно, поэтому я вместо этого хочу загрузить его из файла.После некоторого поиска в Google кажется, что я должен использовать DOMParser() для анализа HTML-файла и поместить результат этого в свойство шаблона.

Я нашел следующую (старую) запись и попыталсясделать то же самое, но это не удается с TypeError: vm.$options.template.charAt is not a function.

Это то, что у меня есть (с использованием vue-resource):

main.js

var asyncComponent = Vue.component('async-component', function (resolve, reject) {
    app.$http.get('./template.html', function(data, status, request){
        var parser = new DOMParser();
        var doc = parser.parseFromString(data, "text/html");
        resolve({
            template: doc
        });
    });
});

const router = new VueRouter({
    routes: [
        { path: '/async', component: asyncComponent }
    ]
})

const app = new Vue({
    el: '#app',
    router
});

Поскольку vue-resource больше не поддерживается, я также попытался использовать fetch, но это привело к точно такой же ошибке:

var asyncComponent = Vue.component('asyncComponent', function (resolve, reject) {
    fetch('./module.html')
    .then(response => response.text())
    .then(function(data) {
        var parser = new DOMParser();
        var doc = parser.parseFromString(data, "text/html");
        resolve({
            template: doc
        });
    });
});

Как загрузить шаблон изотдельный HTML-файл, использующий встроенную функциональность без необходимости использования, например, веб-пакет?

Answer 1

Поле template должно содержать необработанную строку HTML (DOMParser не требуется).

Использование vue-resource:

app.$http.get('./template.html', function(data, status, request) {
  resolve({
    template: data
  });
});

Использование axios:

axios.get('./template.html').then(({ data }) => {
  resolve({
    template: data
  }
});

демо