International Telephone Input with Vue.

Checkout Demo or Playground.

If you are using v2.x.x, check out this documentation.

• yarn:

    yarn add vue-tel-input

• npm:

    npm install vue-tel-input

• Install the component:

  import Vue from 'vue'
  import VueTelInput from 'vue-tel-input'
  
  Vue.use(VueTelInput)

• In your component:

  <template>
   ...
   <vue-tel-input v-model="phone"></vue-tel-input>
   ...
  <template>
  <script>
  export default {
    data() {
      return {
        phone: '',
      };
    },
  }
  </script>

Check out the setup in Codesandbox.

• Add a component using vue-form-generator's abstractField mixin

    <!-- tel-input.vue -->
    <template>
      <vue-tel-input v-model="value"></vue-tel-input>
    </template>
  
    <script>
    import { abstractField } from 'vue-form-generator';
  
    export default {
      name: 'TelephoneInput',
      mixins: [abstractField],
    };
    </script>

• Register the new field as a global component

    import Vue from 'vue';
    import TelInput from '<path>/tel-input.vue';
  
    Vue.component('field-tel-input', TelInput);

• Now it can be used as tel-input in schema of vue-form-generator

  var schema: {
    fields: [{
        type: "tel-input",
        label: "Awesome (tel input)",
        model: "telephone"
    }]
  };

Read more on vue-form-generator's instruction page

Test all props on CodeSandbox.

• Telephone Number parsing, validation by awesome-phonenumber.
• Country Codes data from intl-tel-input.
• User's country by ip2c.org, request using Fetch API.

# install dependencies
$ yarn/npm install

# compile demo for development
$ yarn/npm dev

# open Browser and start serving in demo
$ yarn/npm demo:open

# compile dist demo
$ yarn/npm dist:demo

# compile dist
$ yarn/npm dist

If you working with typescript will need declaration requirements.

npm install --save-dev @types/vue-tel-input

• mikob for super awesome work to remove the bootstrap dependency.
• kalcifield for helping make the input preload with a phone number.
• serbemas for adding web components support.

...more

made with ❤ by Steven.