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


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

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *