Estoy buscando agregar un script externo a un componente Vue. (Estoy usando <script setup> con la API de composición). Por script externo, me refiero a <script src="https://something.com/something.js"></script> , donde el src es una URL externa.

Todas las demás respuestas que encontré dicen que simplemente agregue o agregue un elemento <script> con JavaScript. El problema con esto es que cada vez que se carga o navega hacia el componente Vue, activará esta función y se agregará otra etiqueta de secuencia de comandos. Por ejemplo, si navega hacia, luego hacia afuera y luego hacia el componente 8 veces, habrá 8 etiquetas <script src="..."></script> insertadas en el DOM.

Por ejemplo,

 <script setup> addExternalScript(); function addExternalScript() { const s = document.createElement("script"); s.setAttribute("src", "https://something.com/something.js"); document.head.appendChild(s); } </script>

Agregará este elemento cada vez que se cargue el componente . Por lo tanto, si navega o carga el componente 50 veces, tendrá 50 etiquetas <script> . Puede ver esto inspeccionando el DOM.

Me pregunto si existe una forma más correcta o elegante de obtener scripts externos en los componentes de Vue. ¡Gracias!