0

Existe alguma maneira de importar um arquivo html no template?

 Vue.component('porcentagens',{
data: function(){
    return {
        porcentagemSangramentoMarginal: 78,
        porcentagemPlaca: 78,
        porcentagemOLeary: 78,
    }
},
template:
1
  • Não é só copiar o código do html e colocar na instância Vue?
    – Marconi
    Commented 25/09/2018 às 12:04

1 Resposta 1

1

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.

  1. Fazer uma requisição AJAX para receber o template em forma de string. Ex.:

     fetch("https://meu.template.externo/template.html")
    
  2. Utilizar a função Vue.compile para compilar o template em uma função de renderização. Ex.:

     let compiled = Vue.compile(template_externo);
    
  3. 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>

1
  • Realmente, não vale muito a pena. Achei que teria uma maneira mais fácil. Acabei decidindo por dividir em vários componentes menores mesmo.
    – Jorge Saba
    Commented 1/10/2018 às 14:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .