vue-tel-input

International Telephone Input with Vue.

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>

  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

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

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

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.

International Telephone Input With Vue