Como adicionar scripts JS externos aos componentes VueJS

Neste tutorial, veremos como adicionar scripts JavaScript externos aos componentes Vue.js com diferentes métodos. Para adicionar scripts JavaScript externos aos componentes Vue.js, podemos adicionar um elemento de script com  document.createElement.

Por exemplo, escrevemos

export default {
  //...
  mounted() {
    const recaptchaScript = document.createElement("script");
    recaptchaScript.setAttribute(
      "src",
      "https://www.google.com/recaptcha/api.js"
    );
    document.head.appendChild(recaptchaScript);
  },
  //...
};

Adicione uma tag de script dentro do seu modelo de componente Vue.

Esta é a solução fácil que encontrei. Basta adicionar o script ao modelo de componente. Mas não se esqueça de adicionar  type="application/javascript"  à tag script, caso contrário, ele mostrará um erro durante a construção.

<script type="application/javascript" src="https://cdn.jsdelivr.net/vue.js"></script>

No entanto, se você adicionou  document.write()  em sua tag de script, esse método  não  funcionará. E você receberá um erro como " Falha ao executar 'escrever' em 'Documento': não é possível gravar em um documento a partir de um script externo carregado de forma assíncrona, a menos que seja explicitamente aberto."

Usando o módulo Vue-Meta

Vue-meta  é um módulo vue que você pode instalar em seu aplicativo para adicionar metadados e scripts ao componente Vue. Isso facilita a adição de tags de script à tag head em componentes individuais do Vue.

Exemplo de sintaxe:

export default {
  {
    metaInfo: {
      script: [
        { src: 'https://cdn.jsdelivr.net/vue.js', async: true, defer: true }
      ],
    }
  }
}

Usando um módulo vue-head

vue-head também é um módulo como o vue-meta, ao adicioná-lo ao seu aplicativo Vue, você poderá definir metadados em sua tag head em suas páginas individuais.

Exemplo de código:

export default { 
  head: {
      script: [
        { type: 'text/javascript', src: 'cdn/to/script.js', async: true, body: true}, // Insert in body
        // with shorthand
        { t: 'application/ld+json', i: '{ "@context": "http://schema.org" }' },
        // ...
      ],
    }
}  

Estas são algumas das maneiras que irão ajudá-lo a adicionar script JS externo localmente no componente Vue.