CODEWITHSUNDEEP
javascriptvue.jscomponents
Linx
Linx

Reputation: 763

Use Vue phone number component outside of Vue app

I have a static website that I would like to add a Vue component to. I cannot get it to recognize the component that I'm trying to add. It's called vue-phone-number-input https://github.com/LouisMazel/vue-phone-number-input It says VuePhoneNumberInput is not defined. Here's what I have:

<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
      }
})

I have tried VuePhoneNumberInput: 'vue-phone-number-input' and the error goes away but the component still does not render. I have tried adding Vue.component('vue-phone-number-input', window.VuePhoneNumberInput.default); as is in the docs but I get the error Cannot read property 'default' of undefined. I have also tried the other Vue script they have in the doc, unpkg.com/vue which doesn't work either. Vue itself is working properly within the #phone-search element, it is just the component that's not working.

Upvotes: 0

Views: 823

Answers (1)

Hamed Baatour
Hamed Baatour

Reputation: 6942

It seems like the library UMD bundle is broken so avoid using it and import the library using ES6 imports.

here is a working example: Live Demo

Upvotes: 1

Related Questions