vue-tel-input

vue-tel-input

International Telephone Input Boilerplate with Vue ((integrated with VueFormGenerator).

Checkout Demo at Codesandbox.

Installation

npm install --save vue-tel-input

Usage

• As a standalone component:
  Import vue-tel-input into your Vue component and use as a normal component:

  <template>
  ...
    <tel-input></tel-input>
  ...
  <template>
  
  <script>
  import TelInput from '../vue-tel-input';   
  export default {
    ...
    components: {
      TelInput
    },
  };
  </script>
  

• As a field of VueFormGenerator

  1. Register vue-tel-input as a global component:

      import vueTelInput from "../vue-tel-input.vue";
      ...
      Vue.component("fieldTelephone", vueTelInput);
     

     !! As the naming convention for custom field in VueFormGenerator, you need to put the name of the component as: `field.

  2. Now you can you it in your schema:

     var schema: {
      fields: [{
        type: "telephone",
        label: "Phone Number",
        model: "phone"
      }]
     };
     

  For more info: vue-form-generator/custom-fields

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

Example App Build Setup

npm install             # install dependencies
npm run dev             # serve with hot reload at localhost:8080
npm run build           # build for production with minification
npm run build --report  # build for production and view the bundle analyzer report
npm run unit            # run unit tests
npm test                # run all tests

made with ❤ by Steven.