Package Exports

vue-tel-input

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-tel-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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.