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