Skip to content

stotes/vue-tel-input

 
 

Repository files navigation

vue-tel-input

International Telephone Input with Vue.

Checkout Demo at Codesandbox.

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">
       </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>

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

made with ❤ by Steven.

About

International Telephone Input with Vue https://ry3wlvlxkn.codesandbox.io/

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 82.4%
  • Vue 17.6%