vue3-reactive-tel-input

International Telephone Input with Vue.

Documentation and live demo

Visit the website

Getting started

• Install the plugin:

  npm i vue3-reactive-tel-input
  

• Add the plugin into your app:

  1import { createApp } from 'vue'
  2import App from './App.vue'
  3import Vue3ReactiveTelInput from 'vue3-reactive-tel-input'
  4
  5const app = createApp(App);
  6app.use(Vue3ReactiveTelInput);
  7app.mount("#app");

• props

  1function getDefault(key) {
  2  const value = utils.options[key];
  3  if (typeof value === 'undefined') {
  4    return utils.options[key];
  5  }
  6  return value;
  7
  8}
  9
  10props: {
  11  /**
  12   * reactive value of the tel input
  13   */
  14  modelValue: {
  15    type: String,
  16    default: '',
  17  },
  18  /**
  19   * class assign to root when the input number is invalid belong to the country code
  20   */
  21  badClass: {
  22    type: [String, Array, Object],
  23    default: '',
  24  },
  25  /**
  26   * class assign to root when the input number is valid belong to the country code
  27   */
  28  goodClass: {
  29    type: [String, Array, Object],
  30    default: '',
  31  },
  32  /**
  33   * style assign to root when the input number is invalid belong to the country code
  34   */
  35  badStyle: {
  36    type: [String, Array, Object],
  37    default: '',
  38  },
  39  /**
  40   * style assign to root when the input number is valid belong to the country code
  41   */
  42  goodStyle: {
  43    type: [String, Array, Object],
  44    default: '',
  45  },
  46  /**
  47   * class assign when the input number is invalid belong to the country code
  48   */
  49  badInputClass: {
  50    type: [String, Array, Object],
  51    default: '',
  52  },
  53  /**
  54   * class assign when the input number is valid belong to the country code
  55   */
  56  goodInputClass: {
  57    type: [String, Array, Object],
  58    default: '',
  59  },
  60  /**
  61   * style assign when the input number is invalid belong to the country code
  62   */
  63  badInputStyle: {
  64    type: [String, Array, Object],
  65    default: '',
  66  },
  67  /**
  68   * style assign when the input number is valid belong to the country code
  69   */
  70  goodInputStyle: {
  71    type: [String, Array, Object],
  72    default: '',
  73  },
  74  /**
  75   * list of all contries
  76   */
  77  allCountries: {
  78    type: Array,
  79    default: () => getDefault('allCountries'),
  80  },
  81  /**
  82   * flag to know if the value will be automatically formatted
  83   */
  84  autoFormat: {
  85    type: Boolean,
  86    default: () => getDefault('autoFormat'),
  87  },
  88  /**
  89   * customized validation RegExp or flag 
  90   */
  91  customValidate: {
  92    type: [Boolean, RegExp],
  93    default: () => getDefault('customValidate'),
  94  },
  95  /**
  96   * a default country
  97   */
  98  defaultCountry: {
  99    // Default country code, ie: 'AU'
  100    // Will override the current country of user
  101    type: String,
  102    default: () => getDefault('defaultCountry'),
  103  },
  104  /**
  105   * flag defining whether the input must be disabled
  106   */
  107  disabled: {
  108    type: Boolean,
  109    default: () => getDefault('disabled'),
  110  },
  111  /**
  112   * flag definir if we'll automatically choose a default country
  113   */
  114  autoDefaultCountry: {
  115    type: Boolean,
  116    default: () => getDefault('autoDefaultCountry'),
  117  },
  118  /**
  119   * object of dropdown options
  120   */
  121  dropdownOptions: {
  122    type: Object,
  123    default: () => getDefault('dropdownOptions'),
  124  },
  125  /**
  126   * list of countries to ignore
  127   */
  128  ignoredCountries: {
  129    type: Array,
  130    default: () => getDefault('ignoredCountries'),
  131  },
  132  /**
  133   * object of input options
  134   */
  135  inputOptions: {
  136    type: Object,
  137    default: () => getDefault('inputOptions'),
  138  },
  139  /**
  140   * valid message to display
  141   */
  142  invalidMsg: {
  143    type: String,
  144    default: () => getDefault('invalidMsg'),
  145  },
  146  /**
  147   * the mode of the input
  148   */
  149  mode: {
  150    type: String,
  151    default: () => getDefault('mode'),
  152  },
  153  /**
  154   * limit the giving input to only manage your list of contry
  155   */
  156  onlyCountries: {
  157    type: Array,
  158    default: () => getDefault('onlyCountries'),
  159  },
  160  /**
  161   * the list of preferred countries
  162   */
  163  preferredCountries: {
  164    type: Array,
  165    default: () => getDefault('preferredCountries'),
  166  },
  167  /**
  168   * the flag defining if the input must only content valid characters
  169   */
  170  validCharactersOnly: {
  171    type: Boolean,
  172    default: () => getDefault('validCharactersOnly'),
  173  },
  174  /**
  175   * the root default class
  176   */
  177  rootClass: {
  178    type: [String, Array, Object],
  179    default: () => getDefault('styleClasses'),
  180  },
  181  /**
  182   * the input default class
  183   */
  184  inputClass: {
  185    type: [String, Array, Object],
  186    default: () => {return ''},
  187  },
  188  /**
  189   * the div input default class
  190   */
  191  divInputClass: {
  192    type: [String, Array, Object],
  193    default: () => {return ''},
  194  },
  195  /**
  196   * the root default style
  197   */
  198  rootStyle: {
  199    type: [String, Array, Object],
  200    default: () => {return ''},
  201  },
  202  /**
  203   * the dropdown button style
  204   */
  205  dropdownStyle: {
  206    type: [String, Array, Object],
  207    default: () => {return ''},
  208  },
  209  /**
  210   * the dropdown list style
  211   */
  212  listStyle: {
  213    type: [String, Array, Object],
  214    default: () => {return ''},
  215  },
  216  /**
  217   * the input style
  218   */
  219  inputStyle: {
  220    type: [String, Array, Object],
  221    default: () => {return ''},
  222  },
  223  /**
  224   * the input id 
  225   */
  226  inputId: {
  227    type: [String, Array, Object],
  228    default: () => {return ''},
  229  },
  230  /**
  231   * the input placeholder
  232   */
  233  Placeholder: {
  234    type: String,
  235    default: () => {return ''},
  236  },
  237}

  More info on installation

• Use the vue3-reactive-tel-input component:

  1<!-- component.vue -->
  2<template>
  3  <h1 class="container mb-5 text-black font-bold">vue3-reactive-tel-input</h1>
  4
  5  <div class="container mt-2">
  6    <h2 class="text-black font-bold">Using data prop</h2>
  7    <vue3-reactive-tel-input 
  8      v-model:value="dataphone" 
  9      :rootStyle="{backgroundColor: '#EEEEEE'}" 
  10      :inputStyle="{backgroundColor: '#EEEEEE'}" 
  11      :listStyle="{backgroundColor: '#0EEAEE'}" 
  12      :dropdownStyle="{backgroundColor: '#00EFEE'}" 
  13      />
  14
  15    <span>data prop: {{ dataphone }}</span
  16    ><br />
  17    <span>vuex data prop: {{ vuexphone }}</span>
  18  </div>
  19  <div class="container mt-5">
  20    <h2 class="text-black font-bold">Using vuex data prop</h2>
  21    <vue3-reactive-tel-input 
  22      v-model:value="vuexphone" 
  23      :rootStyle="{backgroundColor: '#EEEEEE'}" 
  24      :inputStyle="{backgroundColor: '#EEEEEE'}" 
  25      :listStyle="{backgroundColor: '#0EEAEE'}" 
  26      :dropdownStyle="{backgroundColor: '#00EFEE'}" 
  27      />
  28
  29    <span>data prop: {{ dataphone }}</span><br />
  30    <span>data prop: {{ fullDataPhoneFormated }}</span><br />
  31    <span>vuex data prop: {{ vuexphone }}</span><br />
  32    <span>data prop: {{ fullVuexPhoneFormated }}</span>
  33  </div>
  34</template>
  35<script>
  36  export default {
  37    name: "App",
  38    data() {
  39      return {
  40        dataphoneObj: null,
  41        data: '',
  42        vuexphoneObj: null
  43      };
  44    },
  45    computed: {
  46      fullDataPhoneFormated(){
  47        return this.dataphoneObj ?`(+${this.dataphoneObj.countryCallingCode}) ${this.dataphoneObj.formatted}`:""
  48      },
  49      fullVuexPhoneFormated(){
  50        return this.vuexphoneObj ?`(+${this.vuexphoneObj.countryCallingCode}) ${this.vuexphoneObj.formatted}`:""
  51      },
  52      vuexphone: {
  53        get() {
  54          return this.$store.getters.vuexphone;
  55        },
  56        set(value) {
  57          /** Value structure
  58           * {
  59             "countryCallingCode": "237",
  60              "nationalNumber": "6954490914",
  61              "number": "+2376954490914",
  62              "country": {
  63                  "name": "Cameroon (Cameroun)",
  64                  "iso2": "CM",
  65                  "dialCode": "237",
  66                  "priority": 0,
  67                  "areaCodes": null
  68              },
  69              "countryCode": "CM",
  70              "valid": false,
  71              "formatted": "6 95 44 90 914"
  72          }
  73        */
  74          this.vuexphoneObj = value;
  75          this.$store.dispatch("update_vuexphone", value.formatted);
  76        },
  77      },
  78      dataphone: {
  79        get() {
  80          return data;
  81        },
  82        set(value) {
  83          /** Value structure
  84           * {
  85             "countryCallingCode": "237",
  86              "nationalNumber": "6954490914",
  87              "number": "+2376954490914",
  88              "country": {
  89                  "name": "Cameroon (Cameroun)",
  90                  "iso2": "CM",
  91                  "dialCode": "237",
  92                  "priority": 0,
  93                  "areaCodes": null
  94              },
  95              "countryCode": "CM",
  96              "valid": false,
  97              "formatted": "6 95 44 90 914"
  98          }
  99        */
  100          this.dataphoneObj = value;
  101          data = value.formatted;
  102        },
  103      },
  104    },
  105  };
  106</script>
  107

  1// main.js
  2import { createApp } from 'vue'
  3import App from './App.vue'
  4import Vue3ReactiveTelInput from 'vue3-reactive-tel-input'
  5import 'bootstrap/dist/css/bootstrap.min.css'
  6import 'bootstrap'
  7import { createStore } from 'vuex' 
  8
  9const vuexModel = {
  10  state: () => ({
  11      vuexphone: '620836564',
  12  }),
  13
  14  actions: {
  15      update_vuexphone( { commit },data ){
  16          commit( 'UPDATE_VUEXPHONE', data );
  17      }
  18  },
  19
  20  mutations: {
  21      UPDATE_VUEXPHONE( state,payload ){
  22          state.vuexphone = payload;
  23      },
  24  },
  25
  26  getters: {
  27      vuexphone( state ){
  28          return state.vuexphone;
  29      },
  30  }
  31}
  32
  33const store = createStore({
  34  modules: {
  35    vuexModel,
  36  }
  37  
  38})
  39
  40createApp(App).use(store).use(Vue3ReactiveTelInput).mount('#app')
  41
  42

Installation

npm

1  npm install vue3-reactive-tel-input

Install the plugin into Vue:

1  import { createApp } from 'vue'
2  import App from './App.vue'
3  import Vue3ReactiveTelInput from 'vue3-reactive-tel-input'
4
5  const VueTelInputOptions = {
6    mode: "international",
7    onlyCountries: ['NG', 'GH', "GB", "US", "CA"]
8  }
9
10  const app = createApp(App);
11  app.use(Vue3ReactiveTelInput, VueTelInputOptions); // Define default global options here (optional)
12  app.mount("#app");

View all available options in Props.

Or use the component directly:

1  <!-- your-component.vue-->
2  <template>
3    <vue3-reactive-tel-input v-model:value="phone"></vue3-reactive-tel-input>
4  </template>
5  <script>
6  import { ref } from 'vue'
7  import {Vue3ReactiveTelInput} from 'vue3-reactive-tel-input'
8
9  export default {
10    components: {
11      Vue3ReactiveTelInput,
12    },
13    data(){
14      return {
15        phone:'',
16      }
17    }
18  };
19  </script>

Browser

1<script src="https://unpkg.com/vue3-reactive-tel-input"></script>

If Vue is detected in the Page, the plugin is installed automatically.

Otherwise, manually install the plugin into Vue:

1Vue.use(window['vue3-reactive-tel-input']);

Use as a custom field of vue-form-generator

• Add a component using vue-form-generator's abstractField mixin

  1  <!-- tel-input.vue -->
  2  <template>
  3    <vue3-reactive-tel-input v-model:value="value"></vue3-reacti-tel-input>
  4  </template>
  5
  6  <script>
  7  import { abstractField } from 'vue-form-generator';
  8
  9  export default {
  10    name: 'TelephoneInput',
  11    mixins: [abstractField],
  12  };
  13  </script>

• Register the new field as a global component

  1  import Vue from 'vue';
  2  import TelInput from '<path>/tel-input.vue';
  3
  4  Vue.component('field-tel-input', TelInput);

• Now it can be used as tel-input in schema of vue-form-generator

  1var schema: {
  2  fields: [{
  3      type: "tel-input",
  4      label: "Awesome (tel input)",
  5      model: "telephone"
  6  }]
  7};

Read more on vue-form-generator's instruction page

Changelog

Go to Github Releases

License

Copyright © 2022 Viclegrand28.

Released under the MIT License.