Использовать Vue номер телефона вне приложения Vue

Question

У меня есть веб-сайт c, к которому я хотел бы добавить Vue компонент. Я не могу распознать компонент, который пытаюсь добавить. Это называется vue-phone-number-input https://github.com/LouisMazel/vue-phone-number-input Там написано VuePhoneNumberInput is not defined. Вот что у меня есть:

<script src="../../assets/global/js/vue/polyfill.min.js"></script>
<script src="../../assets/global/js/vue/vue.min.js"></script>
<script src="../../assets/global/js/vue/vue-phone-number-input.umd.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../../assets/global/css/vue-phone-number-input.css">

<div id="phone-search">
   <VuePhoneNumberInput class="search-input" v-model="phoneNumber" :only-countries="['US']" @update="onUpdate" />
</div>

new Vue({
      el: '#phone-search',
      components: {
          VuePhoneNumberInput: VuePhoneNumberInput
      },
      data: {
         phoneNumber: null
      }
})

Я попытался VuePhoneNumberInput: 'vue-phone-number-input', и ошибка исчезла, но компонент по-прежнему не отображается. Я попытался добавить Vue.component('vue-phone-number-input', window.VuePhoneNumberInput.default); как есть в документации, но я получаю ошибку Cannot read property 'default' of undefined. Я также попробовал другой скрипт Vue, который есть в do c, unpkg.com/vue, который тоже не работает. Vue сам по себе работает нормально в элементе # phone-search, это просто компонент, который не работает.

Answer 1

Кажется, что комплект библиотеки UMD поврежден, поэтому избегайте его использования и импортируйте библиотеку с помощью импорта ES6.

Вот рабочий пример: Live Demo