🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

An International Telephone Input built with Vue.

Form

Documentation

vue-tel-input

International Telephone Input with Vue.

Checkout Demo or Playground.

In-action GIF

Installation

  • yarn:
      yarn add vue-tel-input
  • npm:
      npm i --save vue-tel-input

Usage

  • Import default CSS to your project:

    import 'vue-tel-input/dist/vue-tel-input.css';
  • In your component:

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

Use as a custom field of vue-form-generator

  • 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 VueTelInput from 'vue-tel-input' 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/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

Test all props on CodeSandbox.

Property value Type Default value Description
defaultCountry String '' Default country, will override the country fetched from IP address of user
disabledFetchingCountry Boolean false Disable fetching current country based on IP address of user
disabled Boolean false Disable input field
disabledFormatting Boolean false Disable formatting the phone number in the input, the formatted result still be accessible by formattedNumber returned from onInput event
placeholder String Enter a phone number Placeholder for the input
required Boolean false Required property for HTML5 required attribute
enabledCountryCode Boolean false Enable country code in the input
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']
autocomplete String 'on' Native input 'autocomplete' attribute
name String 'telephone' Native input 'name' attribute
maxLen Number 25 Native input 'maxlength' attribute
wrapperClasses String | Array | Object '' Custom classes for the wrapper
inputClasses String | Array | Object '' Custom classes for the input
inputId String '' Custom 'id' for the input
dropdownOptions Object { disabledDialCode: false, tabindex: 0 } Options for dropdown, supporting disabledDialCode and tabindex
inputOptions Object { showDialCode: false, tabindex: 0 } Options for input, supporting showDialCode (always show dial code in the input) and tabindex
validCharactersOnly Boolean false Only allow valid characters in a phone number (will also verify in mounted, so phone number with invalid characters will be shown as an empty string)

Events

Property value Arguments Description Notes
input String, Object Fires when the input changes with the argument is the object includes { number, isValid, country } onInput deprecated
validate 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 } onValidate deprecated
blur Fires on blur event onBlur deprecated
space Fires on keyup.space event onSpace deprecated
enter Fires on keyup.enter event onEnter deprecated
open Fires when the flags dropdown opens
close Fires when the flags dropdown closes
country-changed Object Fires when country changed (even for the first time) Available from v2.4.2

Highlights & Credits

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 

Typescript Support

If you working with typescript will need declaration requirements.

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

Contributors

...more

made with ❤ by Steven.


You May Also Like