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);
},
//...
};
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."
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 }
],
}
}
}
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.