Используйте стороннюю библиотеку Javascript в компоненте Vue

Насколько я знаю, вы не можете использовать что-то лучше, чем динамическое добавление тега script в заголовок вашей страницы. Однако вы можете создать небольшой плагин, который справится с этим за вас и запускает загрузку скрипта только в тех компонентах, которые вам нужны, и только один раз.

Начнем с самого плагина:

import Vue from 'vue'

const scriptLoader = {
    loaded: [],
    load (src) {
        if (this.loaded.indexOf(src) !== -1) {
            return
        }

        this.loaded.push(src)

        if (document) {
            const script = document.createElement('script')
            script.setAttribute('src', src)
            document.head.appendChild(script)
        }
    }
}

Vue.use({
    install () {
        Vue.prototype.$scriptLoader = scriptLoader
    }
})

Как видите, вы создаете объект scriptLoader, который содержит какой-то объект кэша loaded, который будет помнить, какой сценарий вы уже загрузили в какой-то момент своего приложения. Он также содержит метод load(), который будет обрабатывать добавление сценария в вашу голову.

Условие if (document) здесь, в случае, если вы будете отображать свое приложение на стороне сервера, document не будет существовать.

Затем вы можете загрузить свой скрипт в любой из ваших компонентов при создании с помощью ловушки created:

export default {
    ...
    created () {
        this.$scriptLoader.load('https://apis.google.com/js/api.js')
    }
}

Это самый чистый способ обработки такого сценария ... Надеюсь, это поможет ...

Хорошо, нашел решение, удовлетворяющее всем требованиям.

• Скрипт загружается из Интернета, пакет npm не требуется
• Скрипт загружается только наверняка компоненты при необходимости
• Никаких уродливых манипуляций с домом

Добавьте скрипт в index.html с директивой v-if

<script v-if = "loadGoogleAPI" async defer src = "https://apis.google.com/js/api.js" ... ></script>

Внутри файла компонента (.vue), если вы хотите, чтобы скрипт загружался, установите флаг true:

<script>
export default {
  ...
  loadGoogleAPI: true,
  data() {
  ...
  }
};
</script>