Como executar scripts externos no Vue.js

[Danilo Duarte Ribeiro]

Recentemente, me deparei com uma tarefa em que tive que executar um script JavaScript externo no Vue.js, pois o código em questão não possuia uma biblioteca no npm e, no HTML nativo, só funcionava chamando por tags <script>.

Pois acontece que o Vue não lida muito bem com outros scripts no arquivo index.html, pois ele mesmo já se utiliza de um para funcionar. Com isso, tive que buscar uma forma alternativa de chamar o script apenas após a executação inicial do Vue.

Para isso, utilizei a lib vue-plugin-load-script, e a executei apenas após o aplicativo ser iniciado e o usuário realizar o login.

<script setup lang="ts"> // componente a ser executado somente após o load inicial da aplicação
import { loadScript } from 'vue-plugin-load-script';

loadScript('https://script-teste.com').then(() => {
  // configuração adicional do script
});
</script>

Caso o script deva ser executado somente se uma condição for atendida, basta envolver toda a função loadScript em um if-else.