Vue tel input is an international telephone Input with a library of JavaScript and CSS to improve initial page load time, you might consider importing it asynchronously only when the user navigates to a page.
international telephone input jquery, international telephone input with flags and dial codes, intl tel input get country code, international telephone input npm
How to make use of it:
Install and download:
# NPM $ npm install vue-tel-input --save
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 phone input component to the template.
<vue-tel-input v-model="phone"></vue-tel-input>
4. Props available.
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'), },
International Telephone Input, vue tel input Plugin/Github
See Demo And Download
Official Website(iamstevendao): Click Here
This superior jQuery/javascript plugin is developed by iamstevendao. For extra advanced usage, please go to the official website.