Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

iife - usar componente Vue em contexto externo ao Vue [off]

(Um dúvida meio off - topic aí)

Se eu tenho um componente feito em Vue que foi publicado em um repositório. (portando, embora feito em Vue, ele é um javaScript, pois foi "compilado")

Quero usar ele em contexto externo Vue, como por exemplo, chamar este componente com a tag script type="module" em um html qualquer de outra aplicação. Com fazer?

A forma de publicar o componente num repositório eu já sei fazer, porém, não sei se precisa algo a mais na hora de publicar e tbm na hora de usar.

(vi isto aqui tbm: https://webpack.js.org/configuration/output/#outputiife , que seria para o momento da publicar o componente)

algo assim:

 <meta charset="UTF-8">
 <script src="https://unpkg.com/vue"></script>

<div id="app" style="border: solid 2px red;">
    <meu_componente :param="{ meuparam}" />
</div>

 <script type="module"> 
  import meu_componente from './dist/meu_componente.min.js'; 

   new Vue({
        el: '#app',
        components: { meu_componente }
    })

</script>

  <script nomodule>
    document.getElementById("app").innerHTML = "Your browser doesn't support JavaScript modules :(";
  </script>

enfim, se alguém já passou por isto e puder me ajudar..

3 respostas

Fala ai Herbert, tudo bem? Normalmente a ideia seria você simplesmente importar o arquivo JS no HTML (não precisa estar como type="module").

E garantir que tenha o elemento principal para a instância do Vue ser montada e renderizada.

Pode ser necessário alguns ajustes no Webpack para mudar a forma como é entregue os arquivos finais do projeto.

Espero ter ajudado.

solução!

pois é, esses ajustes que não estou conseguindo fazer. Tem um outro "empacotador" similar ao webpack, que é o "rollup" que faz isto aparentemente de uma maneira melhor.

Mas eu preciso manter o webpack.

Seria algo como ter uma configuração do webpack um a configuração assim:

output: {
    **iife**: true
  }

segundo a documentação: https://webpack.js.org/configuration/output/#outputiife

Fala Herbert, na verdade vai depender muito do que você precisa fazer.

Se você precisa importar o Vue em outro projeto, você vai precisar buildar o projeto, pegar os assets e importar no outro projeto.

Além de garantir que o elemento root exista na página.

Essa seria a forma mais simples de fazer isso, ou seja, importar os assets e ter o elemento root para renderizar a aplicação.

Caso você queira e precise de algo mais sofistico, ai é outros quinhentos kkk

Espero ter ajudado.