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:
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
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:
# Vue 3
$ npm install vue-tel-input --save
# Vue 2
vue-tel-input@legacy --save