vue-tel-input

International Telephone Input with Vue.

Checkout Demo at Github pages.

Installation

• yarn:

    yarn add vue-tel-input-fix

• npm:

    npm i --save vue-tel-input-fix

Usage

• Import default CSS to your project:

  import 'vue-tel-input-fix/dist/vue-tel-input.css';

• Install as a global component:

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

• In your component:

  <template>
  ...
     <vue-tel-input v-model="phone"
                    @onInput="onInput"
                    <!-- optional -->
                    :preferredCountries="['us', 'gb', 'ua']">
     </vue-tel-input>
  ...
  <template>
  <script>
  export default {
    data() {
      return {
        phone: '',
      };
    },
    methods: {
      /**
       * @param {string} number
       * the phone number inputted by user, will be formatted along with country code
       * // Ex: inputted: (AU) 0432 432 432
       * // number = '+61432421546'
       *
       * @param {Boolean} isValid
       * @param {string} country
       */
       onInput({ number, isValid, country }) {
         console.log(number, isValid, country);
       },
    },
  }
  </script>

Use as a custom field of vue-form-generator

• Add a component with vue-form-generator's abstractField

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

• Register the new field as a global component

    import Vue from 'vue';
    import TelInput from '<path>/tel-input.vue';
  
    import 'vue-tel-input-fix/dist/vue-tel-input.css';
  
    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

Props

| Property value | Type | Default value | Description | | -------------- | ---- | ------------- | ----------- | | defaultCountry | string | '' | Default country, will override the country fetched from IP address of user | | disabledFlagsDropdown | Boolean | false | Disable dropdown with country flags | | disabled | Boolean | false | Disable input field | | placeholder | string | Enter a phone number | Placeholder for the input | | required | Boolean | false | Required property for HTML5 required attribute | | enabledFlags | Boolean | true | Enable flags in the input | | preferredCountries | Array | [] | Preferred countries list, will be on top of the dropdown. ie ['AU', 'BR'] | | onlyCountries | Array | [] | List of countries will be shown on the dropdown. ie ['AU', 'BR'] | | ignoredCountries | Array | [] | List of countries will NOT be shown on the dropdown. ie ['AU', 'BR'] |

Events

| Property value | Arguments | Description | | -------------- | --------- | ----------- | | onInput | Object | Fires when the input changes with the argument is the object includes { number, isValid, country and id element } | | onValidate | Object | Fires when the correctness of the phone number changes (from true to false or vice-versa) and when the component is mounted { number, isValid, country } | | onBlur | | Fires on blur event |

Highlights & Credits

• Vue app created by vue-cli.
• Telephone Number parsing, validation by libphonenumber-js.
• Country Codes data from intl-tel-input.
• Country Flags by behdad/region-flags.
• Boostrap-Vue.
• User's Location by get-json and ipifo.io

Demo Usage

# install dependencies
$ yarn/npm install

# compile demo for development
$ yarn/npm dev

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

# compile dist demo
$ yarn/npm dist:demo

# compile dist
$ yarn/npm dist

Contributors

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

made with ❤ by Steven.