International Telephone Input With Vue

International Telephone Input With Vue

vue-tel-input

International Telephone Input with Vue.

Checkout Demo at Github pages.

In-action GIF

Installation

  • yarn:
      yarn add vue-tel-input
    
  • npm:
      npm i --save vue-tel-input
    

Usage

  • Import default CSS to your project:

    import 'vue-tel-input/dist/vue-tel-input.css';
    
  • Install as a global component:

    import Vue from 'vue'
    import VueTelInput from 'vue-tel-input'
    
    Vue.use(VueTelInput)
    
  • In your component:

    <template>
    ...
       <vue-tel-input v-model="phone"
                      @onInput="onInput"
                      <!-- optional -->
                      :preferredCountries="['us', 'gb', 'ua']">
       </vue-tel-input>
    ...
    <template>
    <script>
    export default {
      data() {
        return {
          phone: '',
        };
      },
      methods: {
        /**
         * @param {string} number
         * the phone number inputted by user, will be formatted along with country code
         * // Ex: inputted: (AU) 0432 432 432
         * // number = '+61432421546'
         *
         * @param {Boolean} isValid
         * @param {string} country
         */
         onInput({ number, isValid, country }) {
           console.log(number, isValid, country);
         },
      },
    }
    </script>
    

Use as a custom field of vue-form-generator

  • Add a component with vue-form-generator's abstractField

    // tel-input.vue
    <template>
      <vue-tel-input v-model="value"></vue-tel-input>
    </template>
    
    <script>
    import VueTelInput from 'vue-tel-input'
    import { abstractField } from 'vue-form-generator';
    
    export default {
      name: 'TelephoneInput',
      mixins: [abstractField],
      components: {
        VueTelInput,
      },
    };
    </script>
    
  • Register the new field as a global component

      import Vue from 'vue';
      import TelInput from '<path>/tel-input.vue';
    
      import 'vue-tel-input/dist/vue-tel-input.css';
    
      Vue.component('field-tel-input', TelInput);
    
  • Now it can be used as tel-input in schema of vue-form-generator

    var schema: {
      fields: [{
          type: "tel-input",
          label: "Awesome (tel input)",
          model: "telephone"
      }]
    };
    

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

Props

Property value Type Default value Description
defaultCountry string ''
disabledFetchingCountry Boolean false
disabled Boolean false
disabledFormatting Boolean false
placeholder string Enter a phone number
required Boolean false
enabledCountryCode Boolean false
enabledFlags Boolean true
preferredCountries Array []
onlyCountries Array []
ignoredCountries Array []
autocomplete String 'on'
name String 'telephone'
inputClasses String ''
dropdownOptions Object { disabledDialCode: false }

Events

Property value Arguments Description
onInput Object
onValidate Object
onBlur

Highlights & Credits

Demo Usage


# install dependencies
$ yarn/npm install

# compile demo for development
$ yarn/npm dev

# open Browser and start serve in demo
$ yarn/npm demo:open

# compile dist demo
$ yarn/npm dist:demo

# compile dist
$ yarn/npm dist

Contributors

made with ❤ by Steven.

Github Repository

Tags: #VueJs