vue-tel-input

vue-tel-input

International Telephone Input with Vue.

Checkout Demo at Codesandbox.

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">
     </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 = '[phone]'
       * 
       * @param {Boolean} isValid
       * @param {string} country
       */
       onInput({ number, isValid, country }) {
         console.log(number, isValid, country);
       },
    },
  }
  </script>
  

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

made with ❤ by Steven.