International Telephone Input With Vuetify

Description:

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

Install & Download:

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

How to use it:

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

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

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
},
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
},
value: {
  type: String,
  default: ""
},
label: {
  type: String,
  default: "Enter a Phone Number"
},
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")
},
inputId: {
  type: String,
  default: () => getDefault("inputId")
},
inputOptions: {
  type: Object,
  default: () => getDefault("inputOptions")
},
maxLen: {
  type: Number,
  default: () => getDefault("maxLen")
},
validCharactersOnly: {
  type: Boolean,
  default: () => getDefault("validCharactersOnly")
}

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

#vuejs #javascript #vue