cube-vue-phone-number-input

A super simple phone number input component for Vue built on top of the libphonenumber-js library.

Key features

• Easy to use
• Country selector and country detection
• Phone number formatting as you type
• Simple HTML structure
• Built on top of the libphonenumber-js library
• Comes with SCSS themes

Demo

Let's play with the demo.

Install

yarn add cube-vue-phone-number-input

Exemple

<template>
  <div id="App">
    <fieldset>
      <InputPhoneNumber
        class="cube-phone-number-input-inline"
        :country="country"
        v-model="phoneNumber"
        required
      />
    </fieldset>
  </div>
</template>

<script>
import InputPhoneNumber from 'cube-vue-phone-number-input'
import 'cube-vue-phone-number-input/src/scss/cube-phone-number-input-inline.scss'

export default {
  components: {
    InputPhoneNumber
  },
  data () {
    return {
      country: 'CA',
      phoneNumber: null
    }
  }
}
</script>

Props

| Name | Required | Type | Default | Description | | --- | --- | --- | --- | --- | | value | false | String | null | Any String value that looks like a phone number. | | country | false | String | null | The two-letter ISO country code of the phone number: US, CA… | | countries | false | Array | src/assets/countries.json | Your own Country list. | | countryCodePlaceholder | false | String | "Country" | … | | countryCodeClass | false | String, Array, Object | null | … | | inputClass | false | String, Array, Object | null | … | | placeholder | false | String | "Phone number" | … | | validityErrorMessage | false | String | "Invalid phone number" | … |

Events

| Name | Description | | --- | --- | | input | Sent on PhoneNumber update with the PhoneNumber.number (international format) value. | | update | Sent on PhoneNumber update. | | country | Sent on PhoneNumber.country update based on the user input. | | valid | Sent on PhoneNumber validity change. | | error | Sent on PhoneNumber error. See the libphonenumber-js#parsePhoneNumber section. |

Objects

PhoneNumber

See the libphonenumber-js#phonenumber documentation.

{
  "country": "CA",
  "countryCallingCode": "1",
  "number": "+15062345678",
  "numberFormatted": "+1 506 234 5678",
  "nationalNumber": "5062345678",
  "nationalNumberFormatted": "+(506) 234-5678",
  "uri": "tel:+15062345678",
  "possible": true,
  "valid": true,
  "type": "FIXED_LINE_OR_MOBILE"
}

Country

If you want to provide your own countries prop, make sure to build an Array (or a json file) with the following structure:

[
  { "code": "US", "name": "United States" },
  { "code": "CA", "name": "Canada" },
  { "code": "FR", "name": "France" },
  …
]

countries are automatically sorted by name in the country selector.

HTML 5 Constraint Validation API

This component relies on the Constraint Validation API. Any HTML validation attribute is accepted for your own HTML validation (required, pattern…).

Also the custom validity message is set with the validityErrorMessage prop value when the phone number is not valid.