International Telephone Input With Vuetify

A user-friendly international telephone input with country flags and codes.

How to use it:

1. Import Vue.js,  Vuetify, and the VueTelInputVuetify into the project.

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify);
export default new Vuetify({
});

// main.js
import Vue from 'vue';
import VueTelInputVuetify from 'vue-tel-input-vuetify';
import vuetify from "./plugins/vuetify";

2. Add the international telephone input component to the template.

<template>
  <vue-tel-input-vuetify v-model="phone"></vue-tel-input-vuetify>
<template>

export default {
  data() {
    return {
      phone: null
    }
  }
};

3. Possible props to config the component.

messages: {
  type: [Array, String],
},
errorMessages: {
  type: [Array, String],
},
successMessages: {
  type: [Array, String],
},
hint: {
  type: String,
},
suffix: {
  type: String,
},
prefix: {
  type: String,
},
backgroundColor: {
  type: String,
},
rules: {
  type: Array,
  default: () => [],
},
loaderHeight: {
  type: [Number, String],
  default: 2,
},
loading: {
  type: [Boolean, String],
  default: false,
},
hideDetails: {
  type: [Boolean, String],
},
clearable: {
  type: Boolean,
  default: false,
},
filled: {
  type: Boolean,
  default: false,
},
fullWidth: {
  type: Boolean,
  default: false,
},
flat: {
  type: Boolean,
  default: false,
},
light: {
  type: Boolean,
  default: false,
},
validateOnBlur: {
  type: Boolean,
  default: false,
},
outlined: {
  type: Boolean,
  default: false,
},
dense: {
  type: Boolean,
  default: false,
},
persistentHint: {
  type: Boolean,
  default: false,
},
readonly: {
  type: Boolean,
  default: false,
},
error: {
  type: Boolean,
  default: false,
},
success: {
  type: Boolean,
  default: false,
},
shaped: {
  type: Boolean,
  default: false,
},
singleLine: {
  type: Boolean,
  default: false,
},
rounded: {
  type: Boolean,
  default: false,
},
inputHeight: {
  type: String,
  default: '',
},
value: {
  type: String,
  default: '',
},
label: {
  type: String,
  default: () => getDefault('label'),
},
selectLabel: {
  type: String,
  default: '',
},
menuProps: {
  type: [String, Array, Object],
  default: () => {},
},
placeholder: {
  type: String,
  default: () => getDefault('placeholder'),
},
disabledFetchingCountry: {
  type: Boolean,
  default: () => getDefault('disabledFetchingCountry'),
},
disabled: {
  type: Boolean,
  default: () => getDefault('disabled'),
},
mode: {
  type: String,
  default: () => getDefault('mode'),
},
invalidMsg: {
  type: String,
  default: () => getDefault('invalidMsg'),
},
required: {
  type: Boolean,
  default: () => getDefault('required'),
},
allCountries: {
  type: Array,
  default: () => getDefault('allCountries'),
},
defaultCountry: {
  // Default country code, ie: 'AU'
  // Will override the current country of user
  type: String,
  default: () => getDefault('defaultCountry'),
},
preferredCountries: {
  type: Array,
  default: () => getDefault('preferredCountries'),
},
onlyCountries: {
  type: Array,
  default: () => getDefault('onlyCountries'),
},
ignoredCountries: {
  type: Array,
  default: () => getDefault('ignoredCountries'),
},
autocomplete: {
  type: String,
  default: () => getDefault('autocomplete'),
},
autofocus: {
  type: Boolean,
  default: () => getDefault('autofocus'),
},
name: {
  type: String,
  default: () => getDefault('name'),
},
wrapperClasses: {
  type: [String, Array, Object],
  default: () => getDefault('wrapperClasses'),
},
textFieldClasses: {
  type: [String, Array, Object],
  default: () => '',
},
selectClasses: {
  type: [String, Array, Object],
  default: () => '',
},
inputClasses: {
  type: [String, Array, Object],
  default: () => '',
},
inputId: {
  type: String,
  default: () => getDefault('inputId'),
},
inputOptions: {
  type: Object,
  default: () => getDefault('inputOptions'),
},
maxLen: {
  type: Number,
  default: () => getDefault('maxLen'),
},

Preview:

Changelog:

v1.5.3 (05/03/2022)

• fix(lib): add color property

v1.5.2 (03/26/2022)

• bugfix

v1.5.0 (01/06/2021)

• update

v1.4.1 (09/01/2021)

• Bugfix

v1.4.0 (09/01/2021)

• lib: add new props

v1.3.0 (07/09/2021)

• lib: adding menu-props to v-select

v1.2.16 (02/03/2021)

• core: update item-value on v-select

v1.2.15 (10/24/2020)

• lib: return input event on v-model value change

v1.2.14 (10/24/2020)

• lib: add style props to the CountryCode v-select

v1.2.13 (08/27/2020)

• Fixed lib: error when applying function “reset” of v-form

v1.2.12 (07/28/2020)

• component: fix issue switching countries

v1.2.11 (07/25/2020)

• component: add dense and outlined props

v1.2.10 (07/22/2020)

• fix(component): fix missing margin between flag and country

v1.2.9 (07/21/2020)

• Fixed component: prop for country selector ‘label’ attribute

v1.2.8 (07/18/2020)

• lib: add focus event and other important events

v1.2.7 (07/13/2020)

• lib: replace js scoped css to class scoped css
• lib: fix default label
• core: add polyfill for fetch
• lib: export plugin instead of component

v1.2.3 (07/12/2020)

• core: add label in plugin options

v1.2.0 (07/12/2020)

• textfield: use v-text-field slots from the outside component

v1.1.10 (07/11/2020)

• core: support vuetify loader

v1.1.9 (07/09/2020)

• Bug Fixes

Download Details:

Author: yogakurniawan

Live Demo: https://yogakurniawan.github.io/vue-tel-input-vuetify/

Download Link: https://github.com/yogakurniawan/vue-tel-input-vuetify/archive/master.zip

Official Website: https://github.com/yogakurniawan/vue-tel-input-vuetify

Install & Download:

# NPM
$ npm install vue-tel-input-vuetify --save