Primeiramente, acredito que renderizar templates de arquivos externos não seja recomendado, tantos por motivos de performance, quanto por motivos de segurança.
Porém, por aprendizado e se realmente for uma necessidade, fiz a pesquisa e descobri uma maneira eficiente de fazer isso.
Fazer uma requisição AJAX para receber o template em forma de string. Ex.:
fetch("https://meu.template.externo/template.html")
Utilizar a função Vue.compile
para compilar o template em uma função de renderização. Ex.:
let compiled = Vue.compile(template_externo);
Utilizar a função de renderização do template compilado como função de renderização do componente.
new Vue({
// ...
render: compiled.render,
staticRenderFns: compiled.staticRenderFns,
// ...
});
Para criar um exemplo funcional, criei um Gist com o seguinte conteúdo:
<div>
<h1>{{ teste }}</h1>
</div>
E abaixo está um exemplo funcionando:
var template_url = "https://cdn.rawgit.com/fernandosavio/09c21e24ee23fefdd9267fa1c5650aee/raw/b2a714b18a0e46a411b1451299a9d0d173d55741/vue-teste.html";
fetch(template_url)
.then(response => response.text())
.then(template => {
let compiled_template = Vue.compile(template);
new Vue({
el: '#app',
render: compiled_template.render,
staticRenderFns: compiled_template.staticRenderFns,
data: {
teste: "Olá mundo!"
}
});
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app"></div>