Home
Form
International Telephone Input With Vue

International Telephone Input With Vue

iamstevendao Last Updated: 4 months ago

An International Telephone Input built with Vue.

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:

International Telephone Input With Vue

Changelog:

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

Download Details:

Author: iamstevendao

Live Demo: https://iamstevendao.github.io/vue-tel-input/

Download Link: https://github.com/iamstevendao/vue-tel-input/archive/refs/heads/master.zip

Official Website: https://github.com/iamstevendao/vue-tel-input

Install & Download:

# NPM
$ npm install vue-tel-input --save

Related Posts

Add Comment