cre-o/vue-tel-mini-input

International Telephone Input with Vue (minified edition, no css file and flags, only country code in the input field)

vue-tel-mini-input

International Telephone Input (this is minified version of package vue-tel-input by Steven)

Installation

• yarn:

    yarn add vue-tel-mini-input

• npm:

    npm i --save vue-tel-mini-input

Usage

• Install as a global component:

  import Vue from 'vue'
  import VueTelMiniInput from 'vue-tel-mini-input'
  
  Vue.use(VueTelMiniInput)

• 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>

Props

Property value	Type	Default value	Description
defaultCountry	string	''	Default country, will override the country fetched from IP address of user
disabledFetchingCountry	Boolean	false	Disable fetching current country based on IP address of user
preferredCountries	Array	[]	Preferred countries list, will be on top of the dropdown. ie ['AU', 'BR']
disabled	Boolean	false	Disable input field
placeholder	string	Enter a phone number	Placeholder for the input
required	Boolean	false	Required property for HTML5 required attribute

Events

Property value	Arguments	Description
onInput	Object	Fires when the input changes with the argument is the object includes { number, isValid, country }
onBlur		Fires on blur event

Highlights & Credits

• Vue app created by vue-cli.
• Telephone Number parsing, validation by libphonenumber-js.
• Country Codes data from intl-tel-input.
• Country Flags by behdad/region-flags.
• Boostrap-Vue.
• User's Location by get-json and ipifo.io

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

• mikob for super awesome work to remove the bootstrap dependency.
• kalcifield for helping make the input preload with a phone number.

made with ❤ by Steven and Sergey.