Import Vuejs template from external html file

Question

Is there any way to import an html file in the template?

 Vue.component('porcentagens',{
data: function(){
    return {
        porcentagemSangramentoMarginal: 78,
        porcentagemPlaca: 78,
        porcentagemOLeary: 78,
    }
},
template:

Answer 1

First, I believe that rendering external file templates is not recommended, both for performance reasons and for security reasons.

However, by learning and if it is really a necessity, I did the research and found an efficient way to do it.

1. Make an AJAX request to receive the template in string form. Ex.:

   fetch("https://meu.template.externo/template.html")
   

2. Use the function Vue.compile to compile the template into a render function. Ex.:

   let compiled = Vue.compile(template_externo);
   

3. Use the compiled template rendering function as the component rendering function.

   new Vue({
       // ...
       render: compiled.render,
       staticRenderFns: compiled.staticRenderFns,
       // ...
   });
   

---

To create a functional example, created a Gist with the following content:

<div>
    <h1>{{ teste }}</h1>
</div>

And below is an example working:

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>