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

Cookie-Consent-Using-Bootstrap

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-HTML-Terminals

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-Bootbox

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…

Slider-fg-carousel

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….

Tags-Input-Component

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…

copy-to-clipboard-javascript

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…