International Telephone Input With Vue

Install & Download:

# Vue 3
$ npm install vue-tel-input --save
# Vue 2
vue-tel-input@legacy --save

Description:

An International Telephone Input built with Vue 3 & Vue 2.

How to use it:

1. Import and register the component.

import Vue from 'vue';
import VueTelInput from 'vue-tel-input';
// stylesheet
import 'vue-tel-input/dist/vue-tel-input.css';

Vue.use(VueTelInput);

2. Vue 3 is now supported.

import { createApp } from 'vue';
import App from './App.vue';
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/dist/vue-tel-input.css';

const app = createApp(App);
app.use(VueTelInput);
app.mount('#app');

3. Add the telephone input component to the template.

<vue-tel-input v-model="phone"></vue-tel-input>

4. Available props.

value: {
  type: String,
  default: '',
},
allCountries: {
  type: Array,
  default: () => getDefault('allCountries'),
},
autoFormat: {
  type: Boolean,
  default: () => getDefault('autoFormat'),
},
customValidate: {
  type: [Boolean, RegExp],
  default: () => getDefault('customValidate'),
},
defaultCountry: {
  // Default country code, ie: 'AU'
  // Will override the current country of user
  type: [String, Number],
  default: () => getDefault('defaultCountry'),
},
disabled: {
  type: Boolean,
  default: () => getDefault('disabled'),
},
autoDefaultCountry: {
  type: Boolean,
  default: () => getDefault('autoDefaultCountry'),
},
dropdownOptions: {
  type: Object,
  default: () => getDefault('dropdownOptions'),
},
ignoredCountries: {
  type: Array,
  default: () => getDefault('ignoredCountries'),
},
inputOptions: {
  type: Object,
  default: () => getDefault('inputOptions'),
},
invalidMsg: {
  type: String,
  default: () => getDefault('invalidMsg'),
},
mode: {
  type: String,
  default: () => getDefault('mode'),
},
onlyCountries: {
  type: Array,
  default: () => getDefault('onlyCountries'),
},
preferredCountries: {
  type: Array,
  default: () => getDefault('preferredCountries'),
},
validCharactersOnly: {
  type: Boolean,
  default: () => getDefault('validCharactersOnly'),
},
styleClasses: {
  type: [String, Array, Object],
  default: () => getDefault('styleClasses'),
},

5. Events.

• @validate (phoneObject: Object): Fires when the correctness of the phone number changes (from true to false or vice-versa) and when the component is mounted
• @country-changed (countryObject: Object): Fires when country changed (even for the first time)
• @blur: Fires on blur event
• @focus: Fires on focus event
• @space: Fires on keyup.space event
• @enter: Fires on keyup.enter event
• @open: Fires when the flags dropdown opens

Preview:

Changelog:

v9.0.0 (04/01/2024)

• feature: rewrite to Composition API

v8.3.1 (03/31/2024)

• Update countries data
• Telphone’s dropdown does not open when changing arrow-icon slot
• feature: rewrite to Composition API

v8.2.0 (11/27/2023)

• Bugfixes

v8.1.4 (09/06/2023)

• Bugfixes

v8.1.3 (08/03/2023)

• Bugfixes

v8.1.1 (04/11/2023)

• Update

v8.1.0 (latest) and v5.14.0 (legacy)

• Added Vue 3 version

v5.11.0 (04/16/2022)

• fix: Show no flag when invalid number and showDialCode: true
• fix: Use mode international and show dial code by default in demo
• fix(build): use browserslist config on all chunks

v5.10.1 (02/22/2022)

• Added flag wrapper to fix width inconsistencies
• TypeError in dropdown search box
• event propagation in dropdown searchbox

v5.10.0 (12/22/2021)

• fix: Added flag wrapper to fix width inconsistencies

v5.9.0 (12/08/2021)

• [ImgBot] Optimize images by @imgbot
• Add the ability to change dropdown width

v5.8.0 (12/04/2021)

• fix: Proper nesting of inline and block components fixed plus additional accessibility updates with proper roles and aria callouts

v5.7.0 (12/02/2021)

• feat: Country search box in the dropdown, enabled via prop dropdownOptions.showSearchBox

v5.6.3 (11/13/2021)

• build: Update packages to latest minor versions
• Update selected country when showDialCode is set

v5.6.2 (08/14/2021)

• fix: highlighted item class doesn’t work

v5.6.1 (08/03/2021)

• fix: Cannot read property ‘toUpperCase’ of null
• feat: Add prop to disable dropdown options dropdownOptions.disabled
• feat: Add aria-describedby for inputOptions prop

v5.5.0 (06/26/2021)

• Remove postinstall script

v5.4.0 (06/19/2021)

• Update dependencies and add new build target for modern browsers

v5.3.0 (05/26/2021)

• Use v-if instead of v-show for countries list

v5.2.0 (04/04/2021)

• Update

v5.1.0 (02/21/2021)

• Add option to import separate css files (including sprite.css and component.css):

v5.0.3 (01/21/2021)

• Make inputOptions.placeholder prop reactive

v5.0.2 (01/16/2021)

• Updated

v5.0.1 (01/16/2021)

• Updated