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 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'
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`	`''`	Custom classes for the wrapper
`inputClasses`	`String`	`''`	Custom classes for the `input`
`dropdownOptions`	`Object`	`{ disabledDialCode: false }`	Options for dropdown, supporting `disabledDialCode`
`inputOptions`	`Object`	`{ showDialCode: false }`	Options for input, always show dial code in the input

Events

Property value	Arguments	Description
`input`	`String`, `Object`	Fires when the input changes with the argument is the object includes `{ number, isValid, country }`
`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 }`
`blur`		Fires on blur event
`space`		Fires on keyup.space event
`enter`		Fires on keyup.enter 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.
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

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.

made with ❤ by Steven.

lucadigerlandoDCTH/vue-tel-input