International Telephone Input With Flags And Dial Codes Library

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