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 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';

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);

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.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…